jQuery实现网页表的添加和删除功能_jquery添加删除记录效果-优快云博客

本文链接：https://blog.youkuaiyun.com/chenchanghie/article/details/109543084

文章目录

功能介绍

使用jQuery实现添加和删除记录的功能；

功能实现

添加功能：在实现添加功能我们要找到添加的位置，也就是HTML语句添加的位置。很显然我们的HTML语句是要添加到表格中去，从而形成新的一行，再添加这个记录的同时我们还要注意一个细节，就是要把这个记录的删除功能也要加上。当时这个问题我想了想实现这个删除功能肯定是要在标签中进行实现，那么接下来就是要找到添加语句的a标签，这个我们可以借助添加语句用到的jQuery对象来实现，具体都在代码里面了；接下来就是删除功能的添加，在页面加载完成我们就给当前记录绑定上删除事件就可以了；

用到的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;
}

HTML&JavaScript代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="这个要写上自己jQuery包的路径"></script>
<script type="text/javascript">

	/**
	 * 删除和添加
	 */
	function Delete(){
		//获取Delete超链接对象的爷爷tr
		let Obj = $(this).parent().parent("tr");
		//alert(Obj);
		//弹出提示信息是否删除
		let flag = confirm("确认删除" + Obj.children(":eq(0)").text());
		if(flag)
			Obj.remove();
		//设置成return false取消默认行为
		return false;
	}
	$(function () {
		//添加，点击submit就会添加;
		//获取submit对象,设置click
		$("#addEmpButton").click(function () {
			//获取text中的语句
			let name = $("#empName").val();
			let email = $("#email").val();
			let salary = $("#salary").val();
			// alert(name+email+salary);
			//创建语句jQuery对象
			let add = $("<tr>" +
					"<td>"+name+"</td>" +
					"<td>"+email+"</td>" +
					"<td>"+salary+"</td>" +
					"<td><a href=\"deleteEmp?id=00x\">Delete</a></td>" +
					"</tr>");
			//add追加到表里面
			$(add).appendTo("#employeeTable");
			//找到添加记录的a标签，并且绑定Delete事件
			add.find("a").click(Delete);
		})

		//删除一行
		//记住不要传入Delete()
		$("a").click(Delete);
	});
	
</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>