博客

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

  • Post category:jquery

好的。首先需要明确一下，动态添加/删除表行需要借助jQuery中的append()和remove()方法。接下来，我们来详细讲解一下如何使用jQuery动态添加/删除表行。

一、添加表行

添加表行可以通过在表格的末尾动态添加一行来完成。在jQuery中，我们可以通过以下代码实现：

// 获取表格对象
var $table = $('#myTable');

// 动态创建一行
var $newRow = $("<tr>" +
    "<td>Foo</td>" +
    "<td>Bar</td>" +
    "</tr>");

// 将新行添加到表格中
$table.append($newRow);

上述代码使用了$()函数来动态创建一个<tr>元素，然后使用append()方法将其添加到表格中。其中，$table是表格的jQuery对象。在动态创建行的过程中，我们可以通过字符串拼接的方式来创建行元素，也可以使用jQuery的$()函数来完成创建。

除了添加一个空行，我们也可以通过给每个单元格指定文字来添加一个有内容的行。例如：

// 获取表格对象
var $table = $('#myTable');

// 动态创建一行
var $newRow = $("<tr>" +
    "<td>John</td>" +
    "<td>Doe</td>" +
    "<td>35</td>" +
    "</tr>");

// 将新行添加到表格中
$table.append($newRow);

二、删除表行

删除表格行可以通过删除指定的表格行元素来完成。在jQuery中，我们可以通过以下代码实现：

// 获取要删除的行
var $rowToDelete = $('#myTable tr:last-child');

// 删除行
$rowToDelete.remove();

上述代码使用了$()函数来获取了要删除的最后一行，然后使用remove()方法将其从表格中删除。其中，选择器#myTable tr:last-child选择了表格中的最后一行<tr>元素。

除了删除最后一行，我们也可以通过任意选择器删除任意行。例如，我们可以通过以下代码找到所有含有“delete”按钮的行并将其删除：

// 获取删除按钮
var $deleteButtons = $('#myTable button.delete');

// 给按钮绑定事件
$deleteButtons.on('click', function() {
  // 找到要删除的行
  var $rowToDelete = $(this).closest('tr');
  // 删除行
  $rowToDelete.remove();
});

上述代码使用了选择器#myTable button.delete找到了所有含有delete类的按钮元素，然后通过on()方法为按钮绑定了点击事件，点击按钮后可以通过closest()方法找到最近的包含着当前元素的<tr>元素并将其删除。

三、示例说明

我们来分别用两个示例说明一下动态添加和删除表行的使用。

1. 示例一

在这个例子中，我们将使用上面的代码来动态地向表格中添加行。

<!-- HTML 文件内容 -->
<table id="myTable">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

<button id="addRow">Add Row</button>

<script>
$(function () {
  // 获取按钮对象
  var $addButton = $('#addRow');

  // 为按钮绑定事件
  $addButton.on('click', function() {
    // 获取表格对象
    var $table = $('#myTable');

    // 动态创建一行
    var $newRow = $("<tr>" +
        "<td>Foo</td>" +
        "<td>Bar</td>" +
      "</tr>");

    // 将新行添加到表格中
    $table.append($newRow);
  });
});
</script>

在这个例子中，我们先定义了一个包含两行数据的表格，然后通过jQuery获取了添加行的按钮和表格对象。点击按钮后，我们将会动态地向表格中添加一行数据。

2. 示例二

在这个例子中，我们将使用上面的代码来动态地删除表格中的行。

<!-- HTML 文件内容 -->
<table id="myTable">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>35</td>
      <td><button class="delete">Delete</button></td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
      <td>28</td>
      <td><button class="delete">Delete</button></td>
    </tr>
  </tbody>
</table>

<script>
$(function () {
  // 获取所有删除按钮
  var $deleteButtons = $('#myTable button.delete');

  // 为按钮绑定事件
  $deleteButtons.on('click', function() {
    // 找到要删除的行
    var $rowToDelete = $(this).closest('tr');

    // 删除行
    $rowToDelete.remove();
  });
});
</script>

在这个例子中，我们定义了一个包含两行数据的表格，并给最后一列的每一行都添加了一个删除按钮。通过jQuery获取了所有的删除按钮并为每个按钮绑定了点击事件。点击按钮后，会删除包含此按钮的行。

至此，我们已经详细地讲解了如何使用jQuery动态添加/删除表行的完整攻略，并且给出了两个示例说明。如有疑问欢迎向我提问。

Tags: