利用JQuery實(shí)現(xiàn)datatables插件的增加和刪除行功能

2019-11-19 18:06:27

字體：大中小

供稿：網(wǎng)友

在學(xué)習(xí)過程中遇到了這個(gè)利用JQuery對表格行的增加和刪除，特記錄下來以供初學(xué)者參考。

下面是主要的代碼：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>zengjia he shancu </title> <meta charset="utf-8" /> <script src="../jsPanel-3.5.0/jquery-3.1.1.min.js"></script> <script src="../DataTables/js/js/jquery.dataTables.min.js"></script> <link href="../DataTables/js/css/jquery.dataTables.min.css" rel="stylesheet" /> <script type="text/javascript">  $(document).ready(function () {   $("#table").DataTable()  });  var i = 0;  //添加行  function addRow() {   i++;   var rowTem = '<tr class="tr_' + i + '">'    + '<td><input type="Text" id="txt' + i + '" /></td>'    + '<td><input type="Text" id="pwd' + i + '"/></td>'    + '<td><a href="#" onclick=delRow('+i+') >刪除</a></td>'    + '</tr>';   //var tableHtml = $("#table tbody").html();   // tableHtml += rowTem;    $("#table tbody:last").append(rowTem);   // $("#table tbody").html(tableHtml);  }  //刪除行  function delRow(_id) {   $("#table .tr_"+_id).hide();   i--;  }  //進(jìn)行測試  function ceshi() {   var str1 = '';   for( var j=1;j<=i;j++){    var str = $("#" + "txt" + j).val();    str1 += str;   }   alert(str1);  } </script></head><body> <div style="width:500px">  <table id="table" border="1" width="500px" class="display hover cell-border border-blue-1" >   <tr width="150px">    <th width="70px">用戶名</th>    <th width="70px">密碼</th>    <th width="30px">操作</th>   </tr>  </table> </div> <input type="button" value="添加行" onclick="addRow();" /> <input type="button" value="測試數(shù)據(jù)" onclick="ceshi();" /></body></html>

運(yùn)行的截圖如下：