<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script>
$(function(){
for(i=1i<=10i++){
$("table >tbody").append("<tr><td>"+i+"</td><td>张三"+i+"</td></tr>")
}
})
</script>
</head>
<body>
<table border="1">
<tr>
<th>序号</th>
<th>姓名</th>
</tr>
</table>
</body>
</html>
你想要的效果是，表格的每一行后面有个“添加”按钮，点击按钮后，会自动复制当前行，添加到当前行的后面，这个效果吧？
假设，我们有这样一个table表格：
<table id="table"><tr>
<td>内容1</td>
<td>
<button class="addtr">添加</button>
<button class="deltr">删除</button>
</td>
<tr>
</table>
用jquery来实现“添加”和“删除”的功能：
下面这个是添加：
$("#table").on("click","button.addtr",function(){var $tr=$(this).parents("tr")
$tr.append($tr.clone())
})
下面是删除：
$("#table").on("click","button.deltr",function(){var $tr=$(this).parents("tr")
$tr.remove()
})
可以参考这里，有完整的在线实例演示：
query实例：表格里点击按钮后添加一行，新添加的行附带删除按钮
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）