小彩笔轻松
2016-10-12 15:58
动态添加的行不能删除,原来的行可以删除
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<table border="3" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a>删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td class='sd' ><a>删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="add()" /> <!--在添加按钮上添加点击事件 -->
<script type="text/javascript">
var div1 ="<tr><td>xh002</td><td>刘小芳</td><td><a>删除</a></td></tr>"
$('input').click(function(){
//alert("dsfsfd")
$('table').append(div1);
})
$("a").on('click',function(){
$(this).parents('tr').remove();
})
</script>
</body>
</html>
新添加的行,a标签没有并没有添加事件,
$('input').click(function() {
//alert("dsfsfd")
$('table').append(div1);
$("a").on('click', function() {
$(this).parents('tr').remove();
})
})
$("a").on('click', function() {
$(this).parents('tr').remove();
})
JavaScript进阶篇
468194 学习 · 21891 问题
相似问题