如何在jQuery中添加、编辑和删除表格行？

1. 添加表格行

在jQuery中添加表格行的方法很简单。我们可以使用"append()"方法向表格添加一行，并使用""标签在行中添加单元格。将每个单元格的内容作为"html"值传递给"append()"方法。

下面是一个简单的例子，添加一个带有两个单元格的新行：

<table id="myTable">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>
<script>
  $(document).ready(function(){
    $("#myTable").append(`
      <tr>
        <td>John Strong</td>
        <td>25</td>
      </tr>
    `);
  });
</script>

在上面的代码中，我们首先创建了一个带有表头的表格，并将其ID设置为"myTable"。然后，我们使用"<script>"标记中的jQuery代码获取这个表格，并使用"append()"方法向其中添加一个新行。

注意，在"append()"方法中，我们使用了反引号把整个HTML字符串包裹在内，并使用美元符号"$"和花括号"{}"将"John Strong"和"25"这两个值插入到单元格中。

2. 编辑表格行

对于编辑表格行，我们需要使用jQuery的事件处理程序。我们可以添加一个按钮或链接，并使用事件处理程序向表格添加一个可编辑的单元格。当用户单击这个单元格时，它会转换成一个文本框，允许用户输入新值。当用户完成编辑后，我们可以使用事件处理程序将新值保存到数据库中。

2.1 添加可编辑单元格

要使表格单元格可编辑，我们需要使用jQuery的事件处理程序。我们可以使用"click()"方法来监听单元格的单击事件，并将单元格中的内容替换为输入文本框。

下面是一个简单的例子，向表格添加一个带有可编辑单元格的新行：

<table id="myTable">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td class="edit">John Smith</td>
    <td class="edit">32</td>
  </tr>
</table>
<script>
  $(document).ready(function(){
    $("table").on("click", ".edit", function(){
      var currentTD = $(this);
      var value = $(this).text();
      $(this).html("");
      $(this).find("input").first().focus();
      $(this).on("blur", function(){
        var value = $(this).find("input").first().val();
        $(this).html(value);
      });
    });
  });
</script>

在上面的代码中，我们首先创建了一个带有表头和单行的表格。注意，我们为单元格添加了一个 class 属性 "edit" 来表示它是可编辑的。

我们在jQuery中使用"on()"方法来监听表中"edit"类的单击事件。当单元格被单击时，我们获取当前单元格的引用，并使用"html()"方法替换其中的文本为一个输入文本框。然后，我们在输入文本框上使用"focus()"方法，使它成为当前焦点。

当用户完成编辑并移开焦点时，我们在"blur()"事件处理程序中使用"html()"方法将文本框替换为当前值。

2.2 保存编辑结果

在编辑表格行时，我们需要为每个单元格添加一个保存按钮。当用户单击保存按钮时，我们将单元格中的新值保存到数据库中。

下面是一个简单的例子，以添加保存按钮的方式，来保存编辑的表格行数据：

<table id="myTable">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td class="edit">John Smith</td>
    <td class="edit">32</td>
    <td><button class="save">Save</button></td>
  </tr>
</table>
<script>
  $(document).ready(function(){
    $("table").on("click", ".edit", function(){
      var currentTD = $(this);
      var value = $(this).text();
      $(this).html("");
      $(this).find("input").first().focus();
      $(this).on("blur", function(){
        var value = $(this).find("input").first().val();
        $(this).html(value);
      });
    });
    $("table").on("click", ".save", function(){
      var par = $(this).parent().parent();
      var name = par.children("td:nth-child(1)");
      var age = par.children("td:nth-child(2)");
      var name_val = name.text();
      var age_val = age.text();
      name.html(name_val);
      age.html(age_val);
    });
  });
</script>

在上面的代码中，我们添加了一个保存按钮，并在jQuery中使用"on()"方法来监听"save"按钮的单击事件。当保存按钮被单击时，我们使用"children()"方法获取当前行的第一和第二列，并将它们的值存储在局部变量name_val和age_val中。

接着，我们使用"html()"方法将当前单元格的文本替换为刚刚保存的值，并完成编辑。

3. 删除表格行

在jQuery中删除表格行的方法也很简单。我们可以使用"remove()"方法从表格中删除行。

下面是一个简单的例子，从表格中删除最后一行：

<table id="myTable">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th></th>
  </tr>
  <tr>
    <td class="edit">John Smith</td>
    <td class="edit">32</td>
    <td><button class="delete">Delete</button></td>
  </tr>
</table>
<script>
  $(document).ready(function(){
    $("table").on("click", ".delete", function(){
      $(this).closest("tr").remove();
    });
  });
</script>

在上面的代码中，我们添加了一个删除按钮，并在jQuery中使用"on()"方法来监听"delete"按钮的单击事件。当删除按钮被单击时，我们使用"closest()"方法获取最近的父级行，并使用"remove()"方法从表格中删除行。

总结

向jQuery表中添加、编辑和删除行的方法非常简单。我们可以使用"append()"方法向表格添加行和单元格，使用事件处理程序动态地将表格单元格转换为可编辑单元格，并使用"remove()"方法删除行。

通过了解这些方法，我们能够在创建Web应用程序中尽可能地利用jQuery功能，并轻松地操作表格行。