jQuery 中添加、编辑与删除表格行的方法

在Web开发中，经常需要对表格进行动态操作，如添加、编辑和删除表格行。jQuery作为一款强大的JavaScript库，为我们提供了便捷的方法来实现这些功能。

添加表格行

要在jQuery中添加表格行，首先需要选中表格的tbody元素。假设我们有一个id为“myTable”的表格，以下是添加一行的示例代码：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<script>
$(document).ready(function() {
  $("#addRow").click(function() {
    var newRow = "<tr><td>张三</td><td>25</td></tr>";
    $("#myTable tbody").append(newRow);
  });
});
</script>

上述代码中，当点击id为“addRow”的元素时，会在表格中添加一行新数据。

编辑表格行

编辑表格行通常涉及到修改单元格的内容。例如，当用户点击某个单元格时，可以弹出一个输入框让用户修改内容：

<script>
$(document).ready(function() {
  $("td").click(function() {
    var oldValue = $(this).text();
    $(this).html("<input type='text' value='" + oldValue + "'>");
    $(this).find("input").focus();
    $(this).find("input").blur(function() {
      var newValue = $(this).val();
      $(this).parent().text(newValue);
    });
  });
});
</script>

这段代码实现了点击单元格进行编辑，失去焦点时更新内容的功能。

删除表格行

删除表格行相对简单，只需选中要删除的行并使用remove()方法即可：

<script>
$(document).ready(function() {
  $(".deleteRow").click(function() {
    $(this).closest("tr").remove();
  });
});
</script>

这里假设每行都有一个class为“deleteRow”的删除按钮，点击按钮时会删除对应的行。

通过以上方法，我们可以在jQuery中轻松实现表格行的添加、编辑和删除操作，提升用户体验和页面交互性。