jQuery动态增减行的实例代码解析（推荐)

先给大家展示下效果图：

这是没有增加时的界面：

增加后的界面：

删除后的界面：

原因分析：

不擅长jquery和Java脚本语言

场景：

代码如下：

table class=' table-table-bordered ' dtrth style=' width : 10px '輪次/thth style='width: 100% '比賽時間/th比賽場地/th主隊/th主隊得分/th客隊/th客隊得分/th比賽結果/th删除/th/tr/the dtbody id=' Games _ t body ' TRT input type=' number ' style=' width : 40px '/tdinput type=' date ' style=' width : 140px '/TDT input type=' width : 140px '/TDT input type=' width : 140px '/TDT input type=' number ' style=' width 333333父代(' td ').父代(' tr ')."移除()"删除/button/TD/TRT输入类型=' number ' style=' width : 40px '/TDT输入类型=' date ' style=' width : 140 px '/TDT输入类型=' text ' style=' width : 140 px '/TDT输入类型=' number ' style=' width 3360 80px '/TDT输入父代(' td ').父代(' tr ')."移除()"删除/button/TD/tr/t body/table button type=' button ' id=' add _ game ' class=' BTNBTN-BTN小学-MD ' span class=' glyphicon glyphicon-加号/span/button type=' button ' id=' reduce _ game ' class=' BTNBTN-BTN小学-MD ' span ' class=' glyphicon-glyphicon-减号/span/按钮解决方案：

增加：在tbody后直接增加自定义好的超文本标记语言变量，使用附加方法就好了

jquery代码如下：

脚本src='http:/jQuery/jQuery-2。2 .3 .量滴js /脚本！-自举3.3.6 -脚本src='http:/bootstrap/js/bootstrap。量滴js /脚本！莫里斯杰斯图表-脚本src='http:/莫里斯/莫里斯。量滴js /脚本！-快速点击-脚本src='http:/快速点击/快速点击。js /脚本！-AdminLte App-脚本src=' http : './dist/js/app。量滴js /脚本！-用于演示目的的AdminLTE脚本src='http:/dist/js/demojs /脚本！-page script-script type=' text/JavaScript '函数delete col(){ alert(' delete col方法');警惕(这个。标记名)；//$(这个)。父代(' td ').父代(' tr ').移除();}/scriptscript$(文档)。就绪（函数(){//增加行var TRele=' tr ' ' tdinput type=' number ' style=' width : 40px '/' '/TD ' ' tdinput type=' date ' style=' width : 140px '/'/TD ' ' tdinput type=' number ' style=' width : '父代(“TD”).父代(' tr ').remove()' ' '删除/button/td/tr'$('#add_game ').点击（函数(e){ $(' # Games _ tbbody ').追加(TRele)；});//删除行数，绑定在超文本标记语言中的按钮点击事件中了});/script问题原因：jquery没有onclick()函数，但是这里可以用（不知道为什么，因为我是菜鸟),不知道使用每个()函数是否可以使用。不知道为什么直接使用下面代码不可以用$('.BTN危险')。单击(function(){$(this)).父代(' td ').父代(' tr ').移除();});只能选择第一个，后面的就没办法选定了。

在解决的过程中，我借用了这篇博客

//www .JB 51。net/article/94519。html文件的后缀

发现原来页面上的可以实现删除，但是动态增加后的行数，却无法删除

最后还是借用了

http://bbs.csdn.net/topics/390917779

其中一个答案发现原来的函数可以直接卸载html。另外还可以使用克隆功能，比较方便，也就是第二种方法。

第二种方法，选择tr属性，然后借用clone()，代码如下：

$('#add_game ')。点击(函数(e){//$('#Games_tbody ')。追加(TRele)；第一个方法//第二个方法$ ('# games _ tbody tr:first ')。克隆(真)。追加到($(' # games _ t body '))；});您也可以添加行，同时单击删除。(在上面提到的这个博客中，

//www . JB 51 . net/article/94519 . htm

这时可以删除，好奇怪！)

综上所述，删除按钮不能通过拼接html来增加行数来实现。解决方法是在html中绑定删除方法。

但是，如果您的行数是通过clone()方法获得的，则可以实现“删除”按钮。

以上是边肖介绍的jQuery动态增减线的示例代码分析(推荐)。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！