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

在这篇文章中，我们将学习如何使用jQuery动态地添加/删除HTML表格中的行。在阅读这篇文章之前，请确保你对jQuery有一些基本的了解。

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

<body>
  <div class="container pt-4">
    <div class="table-responsive">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th class="text-center">Row Number</th>
            <th class="text-center">Remove Row</th>
          </tr>
        </thead>
        <tbody id="tbody">
  
        </tbody>
      </table>
    </div>
    <button class="btn btn-md btn-primary" 
        id="addBtn" type="button">
      Add new Row
    </button>
  </div>
</body>

最初，该表是空的，没有行。我们将首先在表体中动态地添加行，然后看看如何从表中删除行。

增加一行：
为了添加一行，定义一个变量，保持表格中现在存在的总数的计数。然后我们将使用jQuery的 “点击 “事件来检测对添加行按钮的点击，然后使用jQuery的.append()方法来在表中添加一行。每个行元素都被分配了一个id Ri，我们以后会用它来删除一个行。每个元素都有一个行索引列和删除按钮列。代码如下。

// 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(`<tr id="R ${++rowIdx}"> <td class="row-index text-center"> Row$ {rowIdx}</p></td>
           <td class="text-center">
            <button class="btn btn-danger remove" 
                type="button">Remove</button>
            </td>
           </tr>`);
});

注意： R${var}是新的JavaScript ES6语法中连接变量和字符串的一种方式。
删除一个行：删除一个行有点复杂。有两个问题。首先，由于每一行都是动态添加的，我们不能通过使用 “click “jQuery事件来直接检测删除按钮的点击，因为它是一个 “直接 “绑定，将处理程序附加到已经存在的元素。它不会被绑定到未来的元素上。其次，当我们删除一行时，我们需要保持索引，即如果我们删除第二行，第三行就会变成第二行，因此我们需要修改id和行索引文本。
为了解决第一个问题，我们将使用委托，然后我们可以处理一个动态添加的元素的事件。
为了解决第二个问题，我们将使用jQuery的.nextAll()方法获得所有点击移除按钮的行旁边的行，然后遍历这些元素来修改行索引和行ID。代码如下。

// 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 <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 the total number of rows by 1.
    rowIdx--;
});

这段代码可以根据需要以多种方式修改。例如，你可以尝试固定表格中的第一行，使表体中至少有一行存在。如果行数为1，就不能删除该行。

最终代码：以下代码是上述部分的组合。

<!DOCTYPE html>
<html>
  
<head>
  <title>test page</title>
  <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
    crossorigin="anonymous">
  
  <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
  </script>
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
  </script>
  <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
  </script>
  
  <script>
     $(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} </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--;
      });
    });
  </script>
</head>
  
<body>
  <div class="container pt-4">
    <div class="table-responsive">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th class="text-center">Row Number</th>
            <th class="text-center">Remove Row</th>
          </tr>
        </thead>
        <tbody id="tbody">
  
        </tbody>
      </table>
    </div>
    <button class="btn btn-md btn-primary" 
      id="addBtn" type="button">
        Add new Row
    </button>
  </div>
</body>
  
</html>