在本文中，我们将学习如何使用 jQuery 从 HTML 表中动态添加/删除行。在阅读本文之前，请确保您对 jQuery 有一些基本的了解。如果没有，您可以从下面提到的链接中学习。
- jQuery 教程
- jQuery 官方 API 文档
HTML 代码：让我们从定义网页的基本 HTML 结构开始。
html
Row Number
Remove Row
javascript
// Node.js program to demonstrate the
// Node.js filehandle.read() Method
// Denotes total number of rows.
var rowIdx = 0;
// jQuery button click event to add a row.
$('#addBtn').on('click', function () {
// Adding a row inside the tbody.
$('#tbody').append(`
Row ${rowIdx}
`);
});javascript
// Node.js program to demonstrate the
// Node.js filehandle.read() Method
// jQuery button click event to remove a row
$('#tbody').on('click', '.remove', function () {
// Getting all the rows next to the
// row containing the clicked button
var child = $(this).closest('tr').nextAll();
// Iterating across all the rows
// obtained to change the index
child.each(function () {
// Getting id.
var id = $(this).attr('id');
// Getting the inside the .row-index class.
var idx = $(this).children('.row-index').children('p');
// Gets the row number from
id.
var dig = parseInt(id.substring(1));
// Modifying row index.
idx.html(`Row ${dig - 1}`);
// Modifying row id.
$(this).attr('id', `R${dig - 1}`);
});
// Removing the current row.
$(this).closest('tr').remove();
// Decreasing the total number of rows by 1.
rowIdx--;
});
最初，表是空的，没有行。我们将从在表格主体内动态添加行开始，然后看看如何从表格中删除一行。
添加一行：
要添加一行，请定义一个变量来保持表中现在存在的总数的计数。然后我们将使用 jQuery 的“click”事件来检测添加行按钮上的点击，然后使用 jQuery 的 .append() 方法在表中添加一行。每个行元素都被分配了一个 id Ri ，稍后我们将使用它来删除一行。每个元素都有一个行索引列和删除按钮列。代码如下。
javascript
// Node.js program to demonstrate the
// Node.js filehandle.read() Method
// Denotes total number of rows.
var rowIdx = 0;
// jQuery button click event to add a row.
$('#addBtn').on('click', function () {
// Adding a row inside the tbody.
$('#tbody').append(`
Row ${rowIdx}
`);
});
注意：在新的 JavaScript ES6 语法中，`R${var}` 是一种将变量与字符串连接起来的方法。
删除一行：删除一行有点复杂。有两个问题。首先，由于每一行都是动态添加的，我们无法通过使用“click”jQuery 事件直接检测删除按钮的点击，因为它是一个“直接”绑定，它将处理程序附加到现有元素。它不会绑定到未来的元素。其次，当我们删除一行时，我们需要保持索引，即如果我们删除第二行，第三行变成第二行，因此我们需要修改id和行索引文本。
为了解决第一个问题，我们将使用委托，然后我们可以处理动态添加元素的事件。
为了解决第二个问题，我们将使用 jQuery 的 .nextAll() 方法获取单击删除按钮的行旁边的所有行，然后遍历这些元素中的每一个以修改行索引和行 ID。代码如下：
javascript
// Node.js program to demonstrate the
// Node.js filehandle.read() Method
// jQuery button click event to remove a row
$('#tbody').on('click', '.remove', function () {
// Getting all the rows next to the
// row containing the clicked button
var child = $(this).closest('tr').nextAll();
// Iterating across all the rows
// obtained to change the index
child.each(function () {
// Getting id.
var id = $(this).attr('id');
// Getting the inside the .row-index class.
var idx = $(this).children('.row-index').children('p');
// Gets the row number from
id.
var dig = parseInt(id.substring(1));
// Modifying row index.
idx.html(`Row ${dig - 1}`);
// Modifying row id.
$(this).attr('id', `R${dig - 1}`);
});
// Removing the current row.
$(this).closest('tr').remove();
// Decreasing the total number of rows by 1.
rowIdx--;
});
可以根据需要以多种方式修改此代码。例如，您可以尝试修复表中的第一行，这样表体中始终至少存在一行。如果行数为 1，则不应删除该行。
最终代码：以下代码是上述部分的组合。
test page
Row Number
Remove Row
