實用快速改table資料方法

 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');    
});