程式狂想筆記

一個攻城師奮鬥史

0%

實用快速改table資料方法

發表於 更新於 分類於 Disqus：

最近看到一種很神奇的寫法
在這邊簡單記錄一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<table>
    <tr>
        <th></th>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
        <th>DD</th>
        <th>EE</th>
    </tr>
    <tr>
        <th>項目1<th>
        <td class="AA">AA</td>
        <td class="BB">BB</td>
        <td class="CC">CC</td>
        <td class="DD">DD</td>
        <td class="EE">EE</td>
    </tr>
    <tr>
        <th>項目2<th>
        <td class="AA">AA</td>
        <td class="BB">BB</td>
        <td class="CC">CC</td>
        <td class="DD">DD</td>
        <td class="EE">EE</td>
    </tr>
    <tr>
        <th>項目2<th>
        <td class="AA">AA</td>
        <td class="BB">BB</td>
        <td class="CC">CC</td>
        <td class="DD">DD</td>
        <td class="EE">EE</td>
    </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('table td').click(function(){    
    if(!$(this).is('.input')){    
        $(this).addClass('input').html('<input type="text" value="'+ $(this).text() +'" />').find('input').focus().blur(function(){    
            var id = $(this).parent().siblings("th:eq(0)").text();    
            var thisclass = $(this).parent().attr("class");
            var thisvalue=$(this).val();    
             
            $.ajax({    
              type: 'POST',    
              url: 'update',    
              data: "id="+id+"&thisclass="+thisclass+"&thisvalue="+thisvalue,
            });    
            $(this).parent().removeClass('input').html($(this).val() || 0);    
        });                        
    }    
}).hover(function(){    
    $(this).addClass('hover');    
},function(){    
    $(this).removeClass('hover');    
});

看到這個寫法，覺得他還缺少了存檔驗證
所以修改程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$('table td').click(function(){    
    var source_text = $(this).text();
if(!$(this).is('.input')){    
    $(this).addClass('input').html('<input type="text" value="'+ $(this).text() +'" />').find('input').focus().blur(function(){ 
        if (source_text == $(this).val()){   
            $(this).parent().removeClass('input').html($(this).val() || 0);    
        }
    }).change(function(){
        if (source_text == $(this).val()) return false;

                var id = $(this).parent().siblings("th:eq(0)").text();    
                var thisclass = $(this).parent().attr("class");
                var thisvalue=$(this).val();    
         
        $.ajax({    
          type: 'POST',    
          url: 'update.php',    
          data: "thisid="+thisid+"&thisclass="+thisclass+"&thisvalue="+thisvalue,
          success:()=>{
            $(this).parent().removeClass('input').html($(this).val() || 0);   
          },
          error:()=>{
            alert('更新失敗');
            $(this).parent().removeClass('input').html(source_text || 0);
          }

        });    
    });                        
}    
}).hover(function(){    
$(this).addClass('hover');    
},function(){    
$(this).removeClass('hover');    
});

PHP部份就不寫了，其實可以不要用class來當改db名字
不然還要多處理class 後面加的不份
用class還需PHP後端還需要split空白過濾之後的東西

PHP回傳錯誤，這樣能讓ajax進入error function
PHP: http_response_code - Manual