jquery中表格的增加和删除行

关注

原创最新推荐文章于 2023-05-29 09:49:05 发布 1.9w 阅读 AI 写同款· GEO 优化 ›

jquery实现添加删除表格 css: <style> div { width: 500px; line-height: 30px; font-size: 18px; margin: 20px auto; border: 1px solid #000; padding: 20px; box-sizing: border-box; 阅读详情

<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

收录于