jQuery添加删除tr
介绍
本文将教会你如何使用jQuery实现添加和删除HTML表格（table）的行（tr）。
准备工作
在开始之前，确保你已经引入了jQuery库。你可以在HTML文件的head标签中添加以下代码来引入jQuery：
<script src="
动手实践
添加tr步骤
首先，我们来看一下添加tr的步骤：
| 步骤 | 代码 | 描述 |
|---|---|---|
| 1 | $("<tr>") |
创建一个新的tr元素 |
| 2 | $(selector).append(element) |
将新的tr元素插入到指定的表格中 |
现在我们来一步步实现这些步骤。
首先，我们需要一个HTML表格，其中包含一个按钮用于添加新的行。在HTML文件中添加以下代码：
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
<button id="addButton">添加行</button>
然后，我们需要编写jQuery代码来实现添加行的功能。在script标签中添加以下代码：
// 当按钮被点击时触发事件
$("#addButton").click(function() {
// 创建一个新的tr元素
var newRow = $("<tr>");
// 在新的tr元素中添加td元素
newRow.append($("<td>").text("小明"));
newRow.append($("<td>").text("18"));
// 将新的tr元素插入到表格中
$("#myTable").append(newRow);
});
删除tr步骤
接下来，我们来看一下删除tr的步骤：
| 步骤 | 代码 | 描述 |
|---|---|---|
| 1 | $(selector).click(function() |
当删除按钮被点击时触发事件 |
| 2 | $(event.target).closest("tr").remove() |
删除被点击按钮所在的行 |
现在我们来一步步实现这些步骤。
首先，我们需要在每一行的末尾添加一个删除按钮。在HTML文件中的tr元素中添加以下代码：
<td><button class="deleteButton">删除</button></td>
然后，我们需要编写jQuery代码来实现删除行的功能。在script标签中添加以下代码：
// 当删除按钮被点击时触发事件
$(".deleteButton").click(function(event) {
// 删除被点击按钮所在的行
$(event.target).closest("tr").remove();
});
完整代码
下面是添加和删除tr的完整代码：
<!DOCTYPE html>
<html>
<head>
<title>jQuery添加删除tr</title>
<script src="
</head>
<body>
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>小红</td>
<td>20</td>
<td><button class="deleteButton">删除</button></td>
</tr>
</table>
<button id="addButton">添加行</button>
<script>
// 当按钮被点击时触发事件
$("#addButton").click(function() {
// 创建一个新的tr元素
var newRow = $("<tr>");
// 在新的tr元素中添加td元素
newRow.append($("<td>").text("小明"));
newRow.append($("<td>").text("18"));
newRow.append($("<td>").html('<button class="deleteButton">删除</button>'));
// 将新的tr元素插入到表格中
$("#myTable").append(newRow);
});
// 当删除按钮被点击时触发事件
$(document).on("click", ".deleteButton", function(event) {
// 删除被点击按钮所在的行
$(event.target).closest("tr").remove();
});
</script>
</body>
</html>
结论
通过上述步骤，我们成功地实现了使用jQuery添加和删除HTML表格的行。在添加行的过程中，我们创建了新的tr元素并将其插入到表格中。在删除行的过程中
