jQuery 动态添加删除表格行

在网页开发中，经常会遇到需要动态添加或删除表格行的情况，比如一个表格需要根据用户输入的数据动态增减行数。使用jQuery可以轻松实现这一功能，让用户体验更加友好。

原理

jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档的遍历、事件处理、动画等操作。通过jQuery，我们可以通过选择器选中特定的元素，并对其进行操作。

在动态添加或删除表格行时，我们首先需要选中表格的某一行，然后根据需要进行添加或删除操作。通过jQuery的append()和remove()方法，我们可以实现添加和删除表格行的功能。

示例代码

HTML部分

首先，我们需要在HTML中定义一个表格，为其添加一个按钮，用于触发添加行的操作。

<table id="myTable">
  <tr>
    <td>第一行</td>
    <td><button class="deleteRow">删除</button></td>
  </tr>
</table>
<button id="addRow">添加行</button>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
JavaScript部分

接下来，我们使用jQuery来实现动态添加和删除表格行的功能。

$(document).ready(function() {
  // 添加行
  $('#addRow').on('click', function() {
    $('#myTable').append('<tr><td>新行</td><td><button class="deleteRow">删除</button></td></tr>');
  });

  // 删除行
  $('#myTable').on('click', '.deleteRow', function() {
    $(this).closest('tr').remove();
  });
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

在上面的代码中，我们首先在文档加载完成后，使用$(document).ready()方法添加了一个点击事件处理程序。当用户点击“添加行”按钮时，会在表格的最后一行添加一个新行，并在新行中添加一个“删除”按钮。当用户点击某一行的“删除”按钮时，会删除该行。

状态图

下面是一个状态图，展示了动态添加删除表格行的流程。

添加行 删除行

关系图

下面是一个关系图，展示了表格行之间的关系。

CUSTOMER ORDER LINE-ITEM has contains

结语

通过jQuery，我们可以轻松实现动态添加删除表格行的功能，为用户提供更加友好的操作体验。希望本文对你有所帮助，谢谢阅读！