欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2017年01月06日 10:04:58   作者：jquery datatables  
這篇文章給大家介紹了jquery實(shí)現(xiàn)datatables插件的增加和刪除行的功能，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下

在學(xué)習(xí)過程中遇到了這個(gè)利用JQuery對(duì)表格行的增加和刪除，特記錄下來以供初學(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)行的截圖如下：


以上所述是小編給大家介紹的利用JQuery實(shí)現(xiàn)datatables插件的增加和刪除行功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論