jQery实现插入删除信息

最新推荐文章于 2017-09-17 10:39:41 发布

刘彦民

最新推荐文章于 2017-09-17 10:39:41 发布

阅读量547

点赞数

分类专栏：前端文章标签： DOM jQuery 添加删除结点

本文链接：https://blog.csdn.net/u014740338/article/details/42835673

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery实现插入删除信息</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
	$(function (){
		//删除员工信息
		function removeTr(aNode){
			var $tr = $(aNode).parent().parent();
			var tdText = $tr.find("td:first").text();
			tdText = $.trim(tdText);
			
			var flag = confirm("你确定删除"+tdText+"的信息?");
			if(flag){
				$tr.remove();
			}
			return false;
		}
		//添加用工信息到表格中
		$(":submit").click(function (){
			$("<tr></tr>").append("<td>" +$(":text[name='name']").val()+ "</td>")
						  .append("<td>" +$(":text[name='email']").val()+ "</td>")
						  .append("<td>" +$(":text[name='salary']").val()+ "</td>")
						  .append("<td><a href='delete'>Delete</a></td>")
						  .appendTo("table")
						  .find("a")//查找所有a标签并为其添加点击事件
						  .click(function (){
							  return removeTr(this);
						  });
		});
	});
</script>
</head>
<body>
	name:<input type="text" name="name" />
	email:<input type="text" name="email" />
	salary:<input type="text" name="salary" />
	<input type="submit" value="添加" />
	<br/><br/>
	<hr>
	<br/>
	<table border="1" cellpadding="5" cellspacing="0" width="600">
		<tr>
			<th>name</th>
			<th>email</th>
			<th>salary</th>
			<th>option</th>
		</tr>
	</table>
</body>
</html>