码迷,mamicode.com
首页 > Web开发 > 详细

jquery动态添加删除一行数据

时间:2014-06-19 12:12:27      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:jquery动态添加删除一行数据

<html>
<head>
<title>添加、删除一行</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
	$(function() {
		$("#addOneRow").click(function() {
			var tempTr = $("tr:first").clone(true);
			$("tr:last").after(tempTr);
			$("tr:last > td > #name").val("");//新添加行name为空
			$("tr:last > td > #address").val("");//新添加行address为空
		});
		$(".delOneRow").click(function() {
			if ($("tr").length < 2) {
				alert("至少保留一行!");
			} else {
				if (confirm("确认删除?")) {
					// $(this).parent().parent().remove();
					$(this).parents("tr").remove();
				}
			}
		});
	});
</script>
</head>

<body>
	<table border="1">
		<tr>
			<td>姓名:</td>
			<td><input type="text" id="name" name="name" />
			</td>
			<td>地址:</td>
			<td><input type="text" id="address" name="address" /></td>
			<td><input type="button" class="delOneRow" value="删除" /></td>
		</tr>
	</table>
	<input type="button" id="addOneRow" value="添加一行" />
</body>

</html>


jquery动态添加删除一行数据,布布扣,bubuko.com

jquery动态添加删除一行数据

标签:jquery动态添加删除一行数据

原文地址:http://blog.csdn.net/adam_wzs/article/details/30132485

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!