本文介绍了一种利用jQuery实现网页中表格行的动态添加和删除的方法。通过克隆已有表格行并绑定点击事件来实现这一功能，适用于需要用户交互操作表格数据的场景。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.1.3.pack.js"></script>
</head>
<body>
<table id="tableBody" name="tableBody" border='1'>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr id="trBody" name="trBody">
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
</tr>
</table>
<input type="button" onClick="addTr();" value="add" />
</body>
<script type="text/javascript">
function addTr(){
var trClone = $("#trBody").clone(true);
trClone.find("#1").text("1");
trClone.find("#2").text("2");
trClone.find("#3").text("3");
trClone.find("#3").bind("click",function(){deleteTr(this)});
trClone.attr("id","trnum");
trClone.appendTo("#tableBody");
}
function deleteTr(elemt){
$(elemt).parent().remove();
}
</script>
</html>
使用jquery动态创建和删除表格
最新推荐文章于 2019-07-21 17:32:44 发布
扫一扫
7823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
