jquery动态表格，动态添加表格行

使用 jQuery 动态添加表格行非常简单。以下是一个示例代码：

HTML 代码：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>女</td>
    </tr>
  </tbody>
</table>
<button id="addRow">添加行</button>

jQuery 代码：

$(document).ready(function() {
  // 添加行
  $("#addRow").click(function() {
    var newRow = $("<tr>");
    var cols = "";
    cols += '<td><input type="text" name="name"></td>';
    cols += '<td><input type="text" name="age"></td>';
    cols += '<td><input type="text" name="gender"></td>';
    cols += '<td><button class="removeRow">删除</button></td>';
    newRow.append(cols);
    $("#myTable").append(newRow);
  });

  // 删除行
  $("#myTable").on("click", ".removeRow", function() {
    $(this).closest("tr").remove();
  });
});

这段代码中，我们首先定义了一个包含表格的 HTML 代码，并添加了一个按钮来触发添加行的操作。在 jQuery 代码中，我们为按钮添加了一个点击事件处理程序，该处理程序会创建一个新行并将其添加到表格中。每行都包含三个输入框和一个删除按钮。当用户单击删除按钮时，我们使用 jQuery 的 closest() 方法找到最近的父元素 tr，然后从 DOM 中删除它。

希望这可以帮助到你。