📌  相关文章
📜  如何使用 jQuery 动态添加/删除表格行?

📅  最后修改于: 2021-10-31 05:36:11             🧑  作者: Mango

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

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

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

html

  
    
                                                                                                    
Row NumberRemove 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 NumberRemove Row
    
       
  

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

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

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