jQuery的动态删除和添加

最新推荐文章于 2023-03-31 09:54:38 发布

李丨少

最新推荐文章于 2023-03-31 09:54:38 发布

阅读量924

点赞数

文章标签： jquery html

本文链接：https://blog.csdn.net/u013313232/article/details/109527218

版权

jQuery的动态删除和添加

<script type="text/javascript">
	//在页面加载完成之后就执行
	$(function () {
		//公用删除
		var deleteFun =function () {

			var $delete = $(this).parent().parent();
			var  name = $delete.find("td:first").text();
			/*
            * confirm确定弹窗，点击确定执行ture，点击取消执行false
            * */
			if (confirm("你确定要删除"+ name  +"么？")){
				$delete.remove();
			}
			return false;
		}
		//创建一个行标签，添加到表单中
		$("#addEmpButton").click(function () {
			//获取文本中的信息
			var name = $("#empName").val();
			var email = $("#email").val();
			var salary = $("#salary").val();
			//获取行信息
			var $trObj = $("<tr>" +
					"<td>"+ name +"</td>" +
					"<td>"+ email +"</td>" +
					"<td>"+ salary +"</td>" +
					"<td><a href=\"deleteEmp?id=003\">Delete</a></td>" +
					"</tr>");
			$trObj.appendTo("#employeeTable");

			//给后代a标签绑上单击事件
			$trObj.find("a").click(deleteFun);
		});
		//删除按钮单击事件
		$("a").click(deleteFun)
	});


	
	
</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>

在这里插入图片描述