利用JQuery实现数据表插件的增加和删除行功能

在学习过程中遇到了这个利用JQuery对表格行的增加和删除，特记录下来以供初学者参考。

下面是主要的代码：

meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title Zeng Jia he shancu/title meta charset=' utf-8 '/script src=' http :/JSpanel-3。5 .0/jquery-3。1 .1 .量滴js '/script脚本src=' http :/DataTables/js/js/jquery。数据表。量滴js /脚本链接href='./DataTables/js/CSS/jquery。数据表。量滴CSS ' rel='样式表'/脚本类型='text/javascript' $(文档)。ready(function () { $('#table ')).DataTable()})；var I=0；//添加行函数AddRow(){ I；var rowTem=' tr class=' tr _ ' I输入类型=' Text ' id=' txt ' I ' '//TD ' t输入类型=' Text ' id=' pwd ' I ' '//TD ' ' TDA href=' # ' onclick=delRow(' I ')删除/a/TD ' '/tr '；//var tableHtml=$('#table tbody ').html()；//TableHTML=RowTem；$('#table tbody:last ').追加(RowTem)；//$('#table tbody ').html(TableHTML)；} //删除行函数delRow(_id) { $('#table .tr_' _id).hide()；我-；} //进行测试函数史策(){ var ST R1=for(var j=1；j=I；j){ var str=$(' # ' txt ' j).val()；str1=str}警报(圣R1)；}/script/head body div style=' width :500 px ' table id=' table ' border=' 1 ' width=' 500 px ' class=' display hover cell-border-blue-1 ' tr width=' 150 px ' th width=' 70px '用户名/th宽度='70px '密码/th宽度='30px '操作/th /tr /table /div输入类型='按钮'值='添加行onclick=' addRow()；'/input type='button' value='测试数据onclick='史策();'//正文/html运行的截图如下：

以上所述是小编给大家介绍的利用JQuery实现数据表插件的增加和删除行功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！