首页>>Jquery文字>>可编辑的HTML表格 Jquery无刷新添加/删除/修改表格(2021-12-06)

可编辑的HTML表格 Jquery无刷新添加/删除/修改表格

 删除数据库已经屏蔽了，更新限制了为5个字符

可编辑的HTML表格 Jquery无刷新添加/删除/修改表格
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <?php  
  2. require "../../conn.php";  
  3. ?>  
  4. <div class="container">  
  5.       <div class="row">  
  6.         <div class="col-md-12" style="padding:2em 0;">  
  7.             <p>点击 <i class="fa fa-pencil box"></i> 按钮可以对表格进行编辑，点击 <i class="fa fa-trash-o box"></i>按钮可以将该表格行删除。</p>  
  8.             <div class="table-responsive">  
  9.                 <table class="table table-bordered table-striped" id="mytable" columnsEd="" addButton="add">  
  10.                     <thead>  
  11.                         <tr>  
  12.                         <th class="hide">ID</th>  
  13.                         <th>姓名</th>  
  14.                         <th>年龄</th>  
  15.                         <th>email</th>  
  16.                         </tr>  
  17.                     </thead>  
  18.                     <tbody>  
  19.                     <?php  
  20.                     $sql="select * from `add_delete_record` where id>0";  
  21. $rs=mysqli_query($lr,$sql);  
  22. if ($row = mysqli_fetch_array($rs))  
  23. {  
  24.     do {  
  25. ?>  
  26.  <tr>  
  27.                 <td class="hide"><?php echo $row['id']?></td>  
  28.                 <td class="content"><?php echo $row['content']?></td>  
  29.                 <td class="text"><?php echo $row['text']?></td>  
  30.                 <td class="position"><?php echo $row['position']?></td>  
  31.             </tr>  
  32. </Tr>  
  33. <?php   
  34.     }  
  35.       
  36.     while ($row = mysqli_fetch_array($rs));  
  37. }?>  
  38.                     </tbody>  
  39.                 </table>  
  40.             </div>  
  41.         </div>  
  42.         <div class="col-md-12"  style="padding-bottom:2em;">  
  43.             <button class="btn btn-info" id="add"><i class="fa fa-plus"></i> 添加新的表格行</button>  
  44.         </div>  
  45.     </div>  
  46.       
  47.       
  48.       
  49. </div>  
JavaScript Code
  1. <script type="text/javascript">  
  2.     var table = SetEditable({  
  3.         tabedId:'mytable,mytable2',  
  4.         onEdit: function(row,values,tableid) {  
  5.             //编辑后回调  
  6.             //console.log(row);  
  7.             //console.log(values);  
  8.             //console.log(tableid);  
  9.               
  10.               
  11.             $.ajax({  
  12.                 type: "post",  
  13.                 url: "ajax.php",  
  14.                 data: values,  
  15.                 async: false,  
  16.                 success: function (res) {  
  17.                   
  18.                     //编辑后可以给第一个单元格id设置默认值  
  19.                     row.children('td').eq(0).text(res.id);  
  20.                 }  
  21.             });  
  22.         },  
  23.         onBeforeDelete: function(row) {  
  24.             //删除前回调  
  25.             console.log(row);  
  26.   
  27.             //获取第一个单元格隐藏的id  
  28.             id=row.children('td').eq(0).text();  
  29.             $.ajax({  
  30.                 type: "post",  
  31.                 url: "del.php",  
  32.                 data: "id="+id,  
  33.                 async: false  
  34.             });  
  35.             //获取第一个单元格隐藏的id  
  36.               
  37.         },  
  38.         onDelete: function(tableid) {  
  39.             //删除后回调  
  40.             //console.log(tableid);  
  41.         },  
  42.         onAdd: function(tableid) {  
  43.             //添加表格后回调  
  44.             console.log(tableid);  
  45.         }  
  46.     });  
  47. </script>  

 


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