jquery 动态增加删除行的简单实例(推荐)

jQuery 动态增加删除行的简单实例

这是一篇关于如何使用 jQuery 实现动态增加和删除表格行的教程。

准备工作

在编写前需要确保以下资源已经引入：

• jQuery 库
• bootstrap 样式库（用于美化样式，非必须）

HTML 代码结构

我们需要先定义好表格的 HTML 代码结构，在代码结构中我们定义了表格的头部和一个 ID 为 table-body 的tbody，用来存放后续动态添加的行。

<table class="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody id="table-body">
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">
        <button id="add-btn" class="btn btn-primary">添加行</button>
      </td>
    </tr>
  </tfoot>
</table>

在tfoot标签中添加了一个button用来触发动态添加行的事件。

jQuery 代码实现动态增加行

接下来我们需要写出 jQuery 代码来实现点击添加按钮后动态添加一行。

// 给按钮绑定点击事件，当按钮被点击时执行以下代码
$('#add-btn').click(function() {
  // 创建一个新的行，并插入到tbody中
  var tr = $('<tr><td><input type="text" class="form-control"></td><td><input type="number" class="form-control"></td><td><button class="btn btn-danger">删除</button></td></tr>');
  $('#table-body').append(tr);
});

首先我们绑定了按钮的点击事件，当按钮被点击时执行回调函数。在回调函数中首先创建了一个新的行，其中包含了三个td标签，分别用于呈现姓名、年龄以及一个删除按钮。

接着，我们将这个新建的行插入到tbody中。

这样，我们就实现了动态增加行的功能。

jQuery 代码实现动态删除行

接下来，我们需要实现点击每一行的删除按钮时删除本行数据的功能。

// 给删除按钮绑定点击事件，当按钮被点击时执行以下代码
$('#table-body').on('click', 'button', function() {
  // 删除被点击的tr标签
  $(this).closest('tr').remove();
});

我们使用了on函数来绑定tbody元素下所有的button标签的点击事件，当按钮被点击时，我们首先获取到该按钮所在的tr标签，然后调用remove方法将其删除。

这样，我们就实现了动态删除行的功能。

示例说明

下面是两个具体的示例说明：

示例一

假设你有一个表格，需要记录你的书籍信息，包括书名和价格，你想实现一个功能，能够点击添加按钮动态增加一行用于记录新增书籍的信息，并能够点击每一行的删除按钮删除相应的数据。

可以根据以下代码改写：

<table class="table">
  <thead>
    <tr>
      <th>书名</th>
      <th>价格</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody id="table-body">
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">
        <button id="add-btn" class="btn btn-primary">添加书籍</button>
      </td>
    </tr>
  </tfoot>
</table>

// 给按钮绑定点击事件，当按钮被点击时执行以下代码
$('#add-btn').click(function() {
  // 创建一个新的行，并插入到tbody中
  var tr = $('<tr><td><input type="text" class="form-control"></td><td><input type="number" class="form-control"></td><td><button class="btn btn-danger">删除</button></td></tr>');
  $('#table-body').append(tr);
});

// 给删除按钮绑定点击事件，当按钮被点击时执行以下代码
$('#table-body').on('click', 'button', function() {
  // 删除被点击的tr标签
  $(this).closest('tr').remove();
});

示例二

假设你需要记录一份员工名单，并且需要记录员工的姓名和工号，并希望可以动态添加新员工和删除已有员工。

可以根据以下代码改写：

<table class="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>工号</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody id="table-body">
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">
        <button id="add-btn" class="btn btn-primary">添加员工</button>
      </td>
    </tr>
  </tfoot>
</table>

// 给按钮绑定点击事件，当按钮被点击时执行以下代码
$('#add-btn').click(function() {
  // 创建一个新的行，并插入到tbody中
  var tr = $('<tr><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td><td><button class="btn btn-danger">删除</button></td></tr>');
  $('#table-body').append(tr);
});

// 给删除按钮绑定点击事件，当按钮被点击时执行以下代码
$('#table-body').on('click', 'button', function() {
  // 删除被点击的tr标签
  $(this).closest('tr').remove();
});

以上是示例代码，你可以进行改写以适应你的具体需求。