jquery中表格的增加和删除行

icheng

浏览: 830991 次
性别:
来自: 珠海

最近访客更多访客>>

u012363178

lylyhi

col_cafe

leifj

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1696)

社区版块

存档分类

2012-01 ( 10)
2011-12 ( 48)
2011-11 ( 52)
更多存档...

<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

分享到：