2010-05-20

如何实现动态添加/删除表格元素

类归于: JavaScript, jQuery — 标签:, kthiz2006 @ 09:48

此效果是用jquery实现的,现代码如下:

//监听添加表格行数的阿按扭
$(document).ready(function(){
$("#but").click(function(){
var $table=$("#tab tr");
var len=$table.length;
$("#tab").append("<tr id="+(len+1)+"><td align=\'center\'><img width=\'140\' src=\'images/1.jpg\'></td><td align=\'center\'><a href=\'javascript:void(0)\' onclick=\'deltr("+(len+1)+")\'>删除</a></td></tr& gt;");
})
})


//删除指定的表格的行
function deltr(index)
{
$table=$("#tab tr");
$("tr[id=\'"+index+"\']").remove();
}

以下写在body中即可

//添加按钮
<input id="but" type="button" value="添加" />


//空的表格
<table class="print_product_img" id="tab" border="1" width="60%" align="center">
</table>

WordPress 所驱动