JS/jQuery实现超简单的Table表格添加,删除行功能示例

以下是JS/jQuery实现超简单的Table表格添加、删除行功能的完整攻略。

1. 实现添加行功能

1.1 HTML代码结构

我们首先需要在HTML中编写一个Table表格的结构。以下是一个示例表格：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td>Male</td>
      <td><button class="delete-row">Delete</button></td>
    </tr>
  </tbody>
</table>

在这个表格中，我们包含了一个头部（thead）和一个内容部分（tbody），并在头部中定义了表格列的名称。在第一个行首部也包含删除按钮，当我们需要删除该行时可以点击按钮触发事件。

1.2 JS/jQuery代码实现

在我们的JS/jQuery代码中，我们需要为“添加行”按钮添加一个单击事件。以下是一个示例：

<button id="add-row">Add Row</button>

然后我们就可以使用以下代码来实现添加行的逻辑：

$(document).ready(function() {
  // 为添加行按钮添加单击事件
  $('#add-row').click(function() {
    // 克隆第一个行
    var row = $('#myTable tbody>tr:last').clone(true);
    // 为删除按钮添加单击事件
    row.find('button').on('click', function() {
      $(this).parent().parent().remove();
    });
    // 插入复制的行到表格中
    $('#myTable tbody').append(row);
  });
});

该代码为添加行按钮添加单击事件，并克隆了最后一行。之后为删除按钮添加了单击事件，并将新行插入到了表格中。当我们单击添加按钮时，就会在表格的最后一行添加一个新行。

2. 实现删除行功能

2.1 HTML代码结构

在前面提到的HTML代码结构中，我们为每个删除按钮添加了一个class为“delete-row”的样式。因此，我们只需要找到所有具有该样式的按钮，并为它们添加一个单击事件，这样就可以删除表格中指定的行。

2.2 JS/jQuery代码实现

以下是实现删除行功能的代码：

$(document).ready(function() {
  // 为添加行按钮添加单击事件
  $('#add-row').click(function() {
    // 克隆第一个行
    var row = $('#myTable tbody>tr:last').clone(true);
    // 为删除按钮添加单击事件
    row.find('button').on('click', function() {
      $(this).parent().parent().remove();
    });
    // 插入复制的行到表格中
    $('#myTable tbody').append(row);
  });

  // 为所有的删除按钮添加单击事件
  $('#myTable').on('click', '.delete-row', function() {
    $(this).parent().parent().remove();
  });
});

假设我们有一个表格，其中任意一行的最后一列都有一个删除按钮，当我们单击该按钮时，对应的行将从表格中被删除。

总结：本攻略通过上述两条示例，详细讲解了JS/jQuery实现超简单的Table表格添加、删除行功能，其中包括HTML代码结构、JS/jQuery代码实现。希望对您有所帮助！