jquery中表格的增加和删除行

最新推荐文章于 2025-06-06 12:08:33 发布

原创最新推荐文章于 2025-06-06 12:08:33 发布 · 1.9w 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #class #javascript #function #button

javascript 同时被 2 个专栏收录

67 篇文章

订阅专栏

html web

40 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的动态表格示例，该表格具备添加和删除行的功能。通过简单的JavaScript代码，可以轻松地在表格中增加新行，并提供一个删除按钮来移除已存在的行。这种动态表格适用于多种网页应用。

<html> <head> <SCRIPT language=JavaScript src="jquery.js" mce_src="jquery.js"></SCRIPT> <SCRIPT language=JavaScript> $("document").ready(function(){ //第六个表格的删除按钮事件绑定 $("#tbody6 .del").click(function() { $(this).parents(".repeat").remove(); }); //第六个表格的添加按钮事件绑定 $("#add6").click(function(){ $("#tbody6>.template") //连同事件一起复制 .clone(true) //去除模板标记 .removeClass("template") //修改内部元素 .find(".content") .text("新增行") .end() .find(".del") .text("删除") .end() //插入表格 .appendTo($("#tbody6")) }); } ) </script> </head> <body> <table border=1 id="table6"> <tbody id="tbody6"> <tr class="template repeat"> <td class="content">这里是模板 by yanleigs Email:landgis@126.com</td> <td><button class="del">模板,不要删除</button></td> </tr> <tr class="repeat"> <td class="content">这行原来就有</td> <td><button class="del">删除</button></td> </tr> <tr class="repeat"> <td class="content">这行原来就有</td> <td><button class="del">删除</button></td> </tr> </tbody> <tfoot> <tr> <td> </td> <td><button id="add6">添加</button></td> </tr> </tfoot> </table> </body> </html>

或则

<html> <head> <SCRIPT language=JavaScript src="jquery.js" mce_src="jquery.js"></SCRIPT> <SCRIPT language=JavaScript> $("document").ready(function(){ //第六个表格的删除按钮事件绑定 $("#tbody6 .del").click(function() { $(this).parents(".repeat").remove(); }); //第六个表格的添加按钮事件绑定 $("#add6").click(function(){ $("#tbody6>.template") //连同事件一起复制 .clone(true) //去除模板标记 .removeClass("template") //修改内部元素 .find(".content") .text("新增行") .end() .find(".del") .text("删除") .end() //插入表格 .appendTo($("#tbody6")) }); } ) </script> </head> <body> <ul id="tbody6"> <li class="template repeat"> <span class="content">这里是模板</span> <span><button class="del">删除</button></span> </li> <li class="repeat"> <span class="content">这行原来就有</span> <span><button class="del">删除</button></span> </li> <li class="repeat"> <span class="content">这行原来就有</span> <span><button class="del">删除</button></span> </li> </ul> <button id="add6">添加</button> </body> </html>

参考:http://www.cnjquery.com/html/JQueryshili/200808/12-585.html