这篇文章给大家介绍了jquery实现datatables插件的增加和删除行的功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
在学习过程中遇到了这个利用JQuery对表格行的增加和删除，特记录下来以供初学者参考。
下面是主要的代码：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>zengjia he shancu </title> <meta charset="utf-8" /> <script src="https://www.jb51.net/jsPanel-3.5.0/jquery-3.1.1.min.js"></script> <script src="https://www.jb51.net/DataTables/js/js/jquery.dataTables.min.js"></script> <link href="https://www.jb51.net/DataTables/js/css/jquery.dataTables.min.css" /> <script type="text/javascript"> $(document).ready(function () { $("#table").DataTable() }); var i = 0; //添加行 function addRow() { i++; var rowTem = '<tr>' + '<td><input type="Text" /></td>' + '<td><input type="Text"/></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--; } //进行测试 function ceshi() { var str1 = ''; for( var j=1;j<=i;j++){ var str = $("#" + "txt" + j).val(); str1 += str; } alert(str1); } </script> </head> <body> <div> <table > <tr> <th>用户名</th> <th>密码</th> <th>操作</th> </tr> </table> </div> <input type="button" value="添加行" /> <input type="button" value="测试数据" /> </body> </html>
运行的截图如下：
以上所述是小编给大家介绍的利用JQuery实现datatables插件的增加和删除行功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: