在本文中，我们将学习如何使用 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
HTML 是网页的基础，用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。
CSS 是网页的基础，用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。
jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。