使用 jQuery 实现动态添加和删除行
在网页开发中，动态添加和删除表格行是一个常见的需求。对于刚入行的小白来说，掌握这个技能非常重要。以下是实现这一功能的步骤及代码示例。
整体流程
下面是实现动态添加和删除行的总体流程：
| 步骤 | 描述 |
|---|---|
| 1 | 创建HTML结构 |
| 2 | 引入jQuery库 |
| 3 | 编写添加行的jQuery代码 |
| 4 | 编写删除行的jQuery代码 |
| 5 | 测试功能 |
步骤解析
1. 创建HTML结构
首先，我们需要定义一个简单的HTML表格和按钮来添加和删除行。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态添加删除行</title>
<script src="
</head>
<body>
<table id="myTable" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button id="addRow">添加行</button>
</body>
</html>
2. 引入jQuery库
在上面的代码中，我们已经引入了jQuery库。它是一个简化JavaScript操作的框架，能帮助我们快速完成复杂任务。
3. 编写添加行的jQuery代码
现在，我们需要添加点击“添加行”按钮时的功能。使用jQuery来动态添加表格行。
$(document).ready(function() {
$("#addRow").click(function() {
// 使用append方法添加一行新数据
$("#myTable tbody").append(`
<tr>
<td><input type="text" placeholder="姓名"></td>
<td><input type="number" placeholder="年龄"></td>
<td><button class="deleteRow">删除</button></td>
</tr>
`);
});
});
这里的代码解释如下：
$(document).ready(function() {...});：确保文档加载完成后再执行函数。$("#addRow").click(function() {...});：给“添加行”按钮绑定点击事件。$("#myTable tbody").append(...);：往表格的tbody部分添加新行。
4. 编写删除行的jQuery代码
接下来，我们为每一行的“删除”按钮添加功能。
$(document).on("click", ".deleteRow", function() {
$(this).closest("tr").remove(); // 删除当前行
});
这里的代码说明：
$(document).on("click", ".deleteRow", function() {...});：为动态添加的删除按钮绑定点击事件。$(this).closest("tr").remove();：找到最近的tr元素（当前行）并将其删除。
5. 测试功能
现在，我们完成了代码的编写。你可以在浏览器中打开通过上述代码生成的HTML文件，点击“添加行”按钮可以添加新行，点击“删除”按钮可以删除相应的行。
sequenceDiagram
participant User
participant Browser
participant jQuery
User->>Browser: 点击“添加行”按钮
Browser->>jQuery: 执行添加行代码
jQuery-->>Browser: 添加新行到表格
User->>Browser: 点击“删除”按钮
Browser->>jQuery: 执行删除行代码
jQuery-->>Browser: 删除对应的行
结尾
通过上述步骤，你已经成功实现了动态添加和删除表格行的基本功能。利用jQuery的强大功能，我们能够轻松地完成这个需求。在掌握了这个基础之后，你可以尝试为表格提供更丰富的功能，比如数据验证、表格排序等。不断尝试和实践会让你在前端开发的道路上走得更远。祝你学习顺利！
