首页>>Jquery文字>>基于jQuery和PureCSS的可编辑表格(2016-08-14)

基于jQuery和PureCSS的可编辑表格

 本站之前已经发布过一个功能完全相同的代码《jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格》，实现方法稍微有点区别，都是完整的代码

基于jQuery和PureCSS的可编辑表格
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <table id="editable" class="pure-table pure-table-bordered" align="center">  
  2.     <thead>  
  3.         <tr>  
  4.             <th>#</th>  
  5.             <th>Make</th>  
  6.             <th>Model</th>  
  7.             <th>Year</th>  
  8.         </tr>  
  9.     </thead>  
  10.   
  11.     <tbody>  
  12.  <tr>  
  13.                 <td>502</td>  
  14.                 <td class="content">000</td>  
  15.                 <td class="text">测</td>  
  16.                 <td class="position">1959</td>  
  17.             </tr>  
  18. </Tr>  
  19.  <tr>  
  20.                 <td>501</td>  
  21.                 <td class="content">23154</td>  
  22.                 <td class="text">测</td>  
  23.                 <td class="position">0</td>  
  24.             </tr>  
  25. </Tr>  
  26.  <tr>  
  27.                 <td>494</td>  
  28.                 <td class="content">d</td>  
  29.                 <td class="text">311</td>  
  30.                 <td class="position">0</td>  
  31.             </tr>  
  32. </Tr>  
  33.  <tr>  
  34.                 <td>499</td>  
  35.                 <td class="content">d</td>  
  36.                 <td class="text">3</td>  
  37.                 <td class="position">0</td>  
  38.             </tr>  
  39. </Tr>  
  40.  <tr>  
  41.                 <td>500</td>  
  42.                 <td class="content">3</td>  
  43.                 <td class="text">3</td>  
  44.                 <td class="position">0</td>  
  45.             </tr>  
  46. </Tr>  
  47.     </tbody>  
  48. </table>  

 

JavaScript Code
  1. <script>  
  2.     $('#editable').editableTableWidget();  
  3.     $('#editable td.uneditable').on('change', function(evt, newValue) {  
  4.         return false;  
  5.     });  
  6.   
  7. $('#editable td').on('change', function(evt, newValue) {  
  8.     var thisid = $(this).siblings("td:eq(0)").text();  
  9.     var thisclass = $(this).attr("class");    
  10.     $.post( "update.php", { thisvalue: newValue,thisid:thisid,thisclass:thisclass })  
  11.         .done(function( data ) {  
  12.                 alert( "Data Loaded: " + data );  
  13.         });   
  14.     ;  
  15. });  
  16. </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_576.html