如何使用 jQuery 动态添加/删除表格行？

在本文中，我们将学习如何使用 jQuery 从 HTML 表中动态添加/删除行。在阅读本文之前，请确保您对 jQuery 有一些基本的了解。如果没有，您可以从下面提到的链接中学习。

1. jQuery 教程
2. jQuery 官方 API 文档

HTML 代码：让我们从定义网页的基本 HTML 结构开始。

html

  

    

      
        
          
            
            
          
        
        
  
        
      
Row Number
Remove Row

    
    
      Add new Row
    
  

最初，表是空的，没有行。我们将从在表格主体内动态添加行开始，然后看看如何从表格中删除一行。

添加一行：
要添加一行，请定义一个变量来保持表中现在存在的总数的计数。然后我们将使用 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}
           
            Remove
            
           `);
});

注意：在新的 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
  
  
  
  
  
  
  
  
  
  
    $(document).ready(function () {
  
      // 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(`<tr id="R${++rowIdx}">
             <td class="row-index text-center">
             <p>Row ${rowIdx}</p>
             </td>
              <td class="text-center">
                <button class="btn btn-danger remove"
                  type="button">Remove</button>
                </td>
              </tr>`);
      });
  
      // 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 <tr> id.
          var id = $(this).attr('id');
  
          // Getting the <p> inside the .row-index class.
          var idx = $(this).children('.row-index').children('p');
  
          // Gets the row number from <tr> 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 total number of rows by 1.
        rowIdx--;
      });
    });
  

  

  
    
      
        
          
            
            
          
        
        
  
        
      Row NumberRemove Row
    
    
        Add new Row
    
  

  

HTML 是网页的基础，用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。

CSS 是网页的基础，用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。