jQuery实现添加删除记录

救救孩子把

于 2018-08-29 21:31:39 发布

1487

分类专栏： jQuery

本文链接：https://blog.csdn.net/yuanmomoya/article/details/82193009

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

实现删除（询问是否删除），和添加

其中最重要的是//动态给a标签委派事件

没有学动态前，我们添加完员工后再去删除，这时在添加完员工后又添加了删除事件，但是也带来的多次绑定删除事件。实例中的注释的代码可以看出，也可亲自试一下

还有就是事件绑定的迭代

用到的CSS

@CHARSET "UTF-8";
#total {
	width: 450px;
	margin-left: auto;
	margin-right: auto;
}

ul {
	list-style-type: none;
}

li {
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float: left;
}

.inner {
	width: 400px;
	border-style: solid;
	border-width: 1px;
	margin: 10px;
	padding: 10px;
	float: left;
}

#employeeTable {
	border-spacing: 1px;
	background-color: black;
	margin: 80px auto 10px auto;
}

th,td {
	background-color: white;
}

#formDiv {
	width: 250px;
	border-style: solid;
	border-width: 1px;
	margin: 50px auto 10px auto;
	padding: 10px;
}

#formDiv input {
	width: 100%;
}

.word {
	width: 40px;
}

.inp {
	width: 200px;
}

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Untitled Document</title>
	<link rel="stylesheet" type="text/css" href="styleB/css.css" />
	<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function(){
			/* 1、完成删除员工的功能 */
			//动态给a标签委派事件
			$("#employeeTable").delegate("a" , "click" , function(){
				var empName = $(this).parents("tr").children("td:first").text();
				var flag = confirm("你真的要删除 <"+empName+"> 吗？");//弹出一个选择框，如果用户选择确定返回true ， 如果选择取消 返回false；
				if(flag){
					$(this).parents("tr").remove();
				}
				return false;
			});
			
			/* $("#employeeTable a").click(function(){
				//alert("你真的要删除吗？");
				//获取要删除的员工姓名
				var empName = $(this).parents("tr").children("td:first").text();
				var flag = confirm("你真的要删除 <"+empName+"> 吗？");//弹出一个选择框，如果用户选择确定返回true ， 如果选择取消 返回false；
				if(flag){
					//this代表被点击的a标签
					$(this).parents("tr").remove();
				}
				//我们只是希望使用超链接的样式，点击后不能跳转
				//取消a标签的默认行为
				return false;
			});	 */
			/*  2、完成添加新员工到table中的功能 */	
			$("#addEmpButton").click(function(){
				//2.1 获取要添加员工的信息
				var name = $("#empName").val();
				var email = $("#email").val();
				var salary = $("#salary").val();
				//2.2 将员工信息拼接到tr中
				var $trEle = $("<tr><td>"+name+"</td><td>"+email+"</td><td>"+salary+"</td><td><a href='#'>Delete</a></td></tr>");
				//2.3 将拼接后的行追加给员工表格
				$("#employeeTable").append($trEle);
				//2.4 给最后添加的a标签绑定删除事件
				//jquery可以给一个标签多次绑定相同的事件
				/* $("#employeeTable a:last").click(function(){
					var empName = $(this).parents("tr").children("td:first").text();
					var flag = confirm("你真的要删除 <"+empName+"> 吗？");//弹出一个选择框，如果用户选择确定返回true ， 如果选择取消 返回false；
					if(flag){
						$(this).parents("tr").remove();
					}
					return false;
				});	 */
			});
			
		});
		
	</script>
	</head>
	<body>
	
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td><a href="deleteEmp?id=001">Delete</a></td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=002">Delete</a></td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td><a href="deleteEmp?id=003">Delete</a></td>
			</tr>
		</table>
	
		<div id="formDiv">
		
			<h4>添加新员工</h4>
	
			<table>
				<tr>
					<td class="word">name: </td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />
					</td>
				</tr>
				<tr>
					<td class="word">email: </td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">salary: </td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button id="addEmpButton" value="abc">
							Submit
						</button>
					</td>
				</tr>
			</table>
	
		</div>
	
	</body>
</html>

救救孩子把

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery实现添加删除记录

实现删除（询问是否删除），和添加其中最重要的是//动态给a标签委派事件没有学动态前，我们添加完员工后再去删除，这时在添加完员工后又添加了删除事件，但是也带来的多次绑定删除事件。实例中的注释的代码可以看出，也可亲自试一下还有就是事件绑定的迭代用到的CSS@CHARSET "UTF-8";#total { width: 450px; margin-left: a...
复制链接

扫一扫