快捷導(dǎo)航

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

更新時(shí)間：2017年01月06日 10:04:58 作者：jquery datatables

這篇文章給大家介紹了jquery實(shí)現(xiàn)datatables插件的增加和刪除行的功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下

在學(xué)習(xí)過(guò)程中遇到了這個(gè)利用JQuery對(duì)表格行的增加和刪除，特記錄下來(lái)以供初學(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)行測(cè)試
  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">用戶(hù)名</th>
    <th width="70px">密碼</th>
    <th width="30px">操作</th>
   </tr>
  </table>
 </div>
 <input type="button" value="添加行" onclick="addRow();" />
 <input type="button" value="測(cè)試數(shù)據(jù)" onclick="ceshi();" />
</body>
</html>

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

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

您可能感興趣的文章:

相關(guān)文章

Jquery中find與each方法用法實(shí)例
這篇文章主要介紹了Jquery中find與each方法用法,實(shí)例分析了find與each方法的功能、定義與使用技巧,需要的朋友可以參考下
2015-02-02
jQuery針對(duì)input的class屬性寫(xiě)了多個(gè)值情況下的選擇方法
這篇文章主要介紹了jQuery針對(duì)input的class屬性寫(xiě)了多個(gè)值情況下的選擇方法,結(jié)合實(shí)例形式對(duì)比分析了jQuery選擇器針對(duì)class屬性中有多個(gè)值情況下的選中方法,需要的朋友可以參考下
2016-06-06
jquerymobile checkbox及時(shí)刷新才能獲取其準(zhǔn)確值
一般登錄的時(shí)候都有個(gè)記住用戶(hù)名記住密碼的兩個(gè)checkbox 多選框用jquerymobile 做頁(yè)面，當(dāng)勾選checkbox 時(shí)總是不能獲取它正確的值
2012-04-04
分享幾個(gè)超級(jí)震憾的圖片特效
這次主要是來(lái)分享幾個(gè)個(gè)人覺(jué)得十分震憾的圖片特效，有jQuery的，有CSS3的，有很萌的烏鴉動(dòng)畫(huà)，也有簡(jiǎn)單樸實(shí)的圖片播放動(dòng)畫(huà)，當(dāng)然有些你可能已經(jīng)看到過(guò)了，不過(guò)也沒(méi)關(guān)系，你能路過(guò)就算是對(duì)我的支持了
2012-01-01
JQuery實(shí)現(xiàn)電梯導(dǎo)航特效
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)電梯導(dǎo)航特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
jQuery實(shí)現(xiàn)的Div窗口震動(dòng)效果實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的Div窗口震動(dòng)效果,可實(shí)現(xiàn)點(diǎn)擊提交后窗口出現(xiàn)震動(dòng)效果,需要的朋友可以參考下
2015-08-08
Jquery表單驗(yàn)證失敗后不提交的解決方法
很多人可能都會(huì)遇到在調(diào)試的時(shí)候用了return了false，可為什么還會(huì)提交呢？這個(gè)問(wèn)題我最近也碰到了，嘗試了多次也沒(méi)有用，后來(lái)終于發(fā)現(xiàn)了其中的問(wèn)題，下面分享處理給大家，讓同樣遇到這個(gè)問(wèn)題的朋友們能夠看看，有需要的朋友們下面來(lái)一起看看吧。
2016-10-10
jquery輪播的實(shí)現(xiàn)方式附完整實(shí)例
這篇文章主要介紹了jquery輪播的實(shí)現(xiàn)方式，文中分享了jQuery輪播完整實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-07-07
jquery獲得同源iframe內(nèi)body下標(biāo)簽的值的方法
這篇文章主要介紹了jquery獲得同源iframe內(nèi)body下標(biāo)簽的值的方法,很簡(jiǎn)單，很實(shí)用，需要的朋友可以參考下
2014-09-09
jQuery常用選擇器詳解
這篇文章主要為大家詳細(xì)介紹了jQuery常用選擇器的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07