事件委托：增加删除记录--事件委托_事件委托添加删除js例子-CSDN博客

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127836720

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#employeeTable {
				border-collapse: collapse;/合并边框 width: 307px;
				margin: 40px auto;
			}

			#employeeTable th {
				border: 1px solid black;
				width: 57px;
			}

			#employeeTable td {
				border: 1px solid black;
			}

			div {
				border: 1px black solid;
				width: 250px;
				padding: 10px;
				margin: 40px auto;
			}
		</style>
	</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>
		</table>
		<div>
			<strong>添加新员工</strong>
			<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>
		<script src="js/jquery-3.6.1.js"></script>
		<script>
			//添加新员工
			$('#addEmpButton').click(function() {
				//收集输入数据
				var $empName = $('#empName');
				var $email = $('#email');
				var $salary = $('#salary');
				var name = $empName.val(); //表单传入的数据
				var email = $email.val();
				var salary = $salary.val();

				//生成对应的标签 插入节点中 
				if (name != "" && email != "" && salary != "") {
					//给加入的增加监听
					//是后代关系
					$('<tr></tr>')
						.append('<td>' + name + '</td>')
						.append('<td>' + email + '</td>')
						.append('<td>' + salary + '</td>')
						.append('<td><a href="deleteEmp?id="' + Date.now() + '>Delete</a></td>')
						.appendTo('#employeeTable>tbody')
						.find('a')
						
				} else {
					alert('请输入正确的')
				}
				//清除输入
				$empName.val('');
				$email.val('');
				$salary.val('');
			})

			//删除员工-找到a标签
			//后代选择器
			//这是初始化的时候增加的监听 但是新增加的没有监听
			//事件委托
			$('#employeeTable').delegate('a','click',delA)
			
			function delA(){
				//找到父亲
				// this是dom元素
				var $tr = $(this).parent().parent();
				var name = $tr.children(':first').html();
				if (confirm('确定删除' + name + '吗？')) {
					//删除所有元素
					$tr.remove();
				}
				return false;
				
			}
		</script>
	</body>
</html>