HTMLtable克隆与事件绑定：on()与live()方法比较-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_63749263/article/details/134080440

在HTML中，table标签用于定义一个表格。一个完整的表格通常包括table、thead、tbody和tr等标签。在克隆一个table表时，必须包含table标签，否则克隆的结果可能无法正确显示或操作。

table标签定义了一个表格的开始和结束，它告诉浏览器这是一个表格元素，需要按照表格的规则进行布局和渲染。如果没有table标签，浏览器无法识别这是一个表格，也就无法正确解析和显示表格的内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</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>
		<table style="display: none;">
			<tr id="mytr">
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td><a href="#">Delete</a></td>
			</tr>
		</table>
	</body>
</html>
<script src="../js/jquery-1.7.2.js"></script>
<script>
	$("#addEmpButton").click(function() {
		var email = $("#email").val()
		var salary = $("#salary").val()
		var empName = $("#empName").val()
		var mytrObj = $("#mytr")
		var newmyTrObj = mytrObj.clone(true)
		newmyTrObj.find("td").eq(0).html(empName)
		newmyTrObj.find("td").eq(1).html(email)
		newmyTrObj.find("td").eq(2).html(salary)
		newmyTrObj.appendTo($("#employeeTable"))
	})
	$("table a").live("click", function() {
		$(this).parents("tr").remove()
	})
</script>

使用克隆做增删，对新增的内容做绑定事件要使用on()或者live()方法