📅 最后修改于: 2023-12-03 15:23:55.083000 🧑 作者: Mango
在网页开发中，表格是非常常见的一种页面元素。有时我们需要通过动态添加或删除表格行来实现某些功能，比如增加一条新的数据记录或删除一条旧的记录。这时候，我们可以使用 jQuery 来轻松地完成这些操作。
添加表格行的方法很简单，我们只需要通过 jQuery 创建一个新的 <tr> 标签，然后将它添加到需要添加新行的表格中即可。具体代码如下：
// 找到需要添加新行的表格
var table = $('table');
// 创建一个新的空行
var newRow = $('<tr></tr>');
// 在新行中添加需要显示的数据
newRow.append('<td>John</td>');
newRow.append('<td>Doe</td>');
newRow.append('<td>john@example.com</td>');
// 将新行添加到表格中
table.append(newRow);
在上面的代码中，我们先找到需要添加新行的表格，然后创建一个新的空行，再通过 append() 方法逐个添加需要显示的数据，最后将新行添加到表格中即可。
删除表格行也很简单，我们只需要找到需要删除的行所在的位置，然后通过 jQuery 的 remove() 方法将它从表格中删除即可。具体代码如下：
// 找到需要删除的表格行
var row = $('table tr:eq(1)');
// 将该行从表格中删除
row.remove();
在上面的代码中，我们先找到需要删除的表格行，这里我们假设要删除第二行，因此使用了 :eq(1) 来找到第二行（注意，下标从 0 开始）。然后我们使用 remove() 方法将该行从表格中删除。
下面是一个完整的演示效果，包括动态添加和删除表格行的代码，以及一个简单的页面展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态表格行</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>动态表格行</h1>
<table border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
</table>
<br>
<button id="addBtn">添加新行</button>
<br><br>
<button id="delBtn">删除第二行</button>
<script>
$(document).ready(function() {
// 添加新行
$('#addBtn').click(function() {
// 找到需要添加新行的表格
var table = $('table');
// 创建一个新的空行
var newRow = $('<tr></tr>');
// 在新行中添加需要显示的数据
newRow.append('<td>John</td>');
newRow.append('<td>Doe</td>');
newRow.append('<td>john@example.com</td>');
// 将新行添加到表格中
table.append(newRow);
});
// 删除表格行
$('#delBtn').click(function() {
// 找到需要删除的表格行
var row = $('table tr:eq(1)');
// 将该行从表格中删除
row.remove();
});
});
</script>
</body>
</html>
在上面的演示效果中，我们先创建了一个包含一行数据的表格，然后添加了一个“添加新行”的按钮和一个“删除第二行”的按钮，分别对应上面介绍的两个操作。当点击这些按钮时，会通过 jQuery 动态添加或删除表格行。
通过上面的介绍，我们可以看到，使用 jQuery 动态添加或删除表格行非常简单，只需了解一些基本的操作方法即可实现。当然，还有很多其他的 jQuery 操作可以用来处理表格，比如修改表格内容、排序、过滤等等。希望本文能够帮助大家更好地处理表格数据，实现更强大的页面功能。