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

要在jQuery中添加、编辑和删除表格行，可以使用append、html和remove函数来添加、编辑和删除表格行。下面是两个示例，演示如何在jQuery中添加、编辑和删除表格行。

示例1：添加表格行

下面是一个示例，演示如何在jQuery中添加表格行：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Add Table Row Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>25</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>30</td>
        <td>Female</td>
      </tr>
    </tbody>
  </table>
  <button id="addRow">Add Row</button>
  <script>
    $(document).ready(function() {
      $("#addRow").click(function() {
        var newRow = "<tr><td>Bob</td><td>35</td><td>Male</td></tr>";
        $("#myTable tbody").append(newRow);
      });
    });
  </script>
</body>
</html>

在这个示例中，我们有一个包含三列的表格，其中包含两行数据。我们还有一个按钮，用于添加新行。当单击按钮时，我们使用append函数向表格的tbody元素添加新行。

示例2：编辑和删除表格行

下面是一个示例，演示如何在jQuery中编辑和删除表格行：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Edit and Delete Table Row Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>25</td>
        <td>Male</td>
        <td><button class="editRow">Edit</button><button class="deleteRow">Delete</button></td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>30</td>
        <td>Female</td>
        <td><button class="editRow">Edit</button><button class="deleteRow">Delete</button></td>
      </tr>
    </tbody>
  </table>
  <script>
    $(document).ready(function() {
      // 编辑行
      $(document).on("click", ".editRow", function() {
        var currentRow = $(this).closest("tr");
        var name = currentRow.find("td:eq(0)").text();
        var age = currentRow.find("td:eq(1)").text();
        var gender = currentRow.find("td:eq(2)").text();
        currentRow.find("td:eq(0)").html("<input type='text' value='" + name + "'>");
        currentRow.find("td:eq(1)").html("<input type='text' value='" + age + "'>");
        currentRow.find("td:eq(2)").html("<input type='text' value='" + gender + "'>");
        $(this).text("Save").removeClass("editRow").addClass("saveRow");
      });

      // 保存行
      $(document).on("click", ".saveRow", function() {
        var currentRow = $(this).closest("tr");
        var name = currentRow.find("td:eq(0) input").val();
        var age = currentRow.find("td:eq(1) input").val();
        var gender = currentRow.find("td:eq(2) input").val();
        currentRow.find("td:eq(0)").text(name);
        currentRow.find("td:eq(1)").text(age);
        currentRow.find("td:eq(2)").text(gender);
        $(this).text("Edit").removeClass("saveRow").addClass("editRow");
      });

      // 删除行
      $(document).on("click", ".deleteRow", function() {
        $(this).closest("tr").remove();
      });
    });
  </script>
</body>
</html>

在这个示例中，我们有一个包含四列的表格，其中包含两行数据。每行都有一个“编辑”按钮和一个“删除”按钮。当单击“编辑”按钮时，我们使用html函数将每个单元格中的文本替换为文本框，以便用户可以编辑数据。当单击“保存”按钮时，我们使用val函数获取文本框中的值，并使用text函数将每个单元格中的文本替换为新值。当单击“删除”按钮时，我们使用remove函数删除整行。

希望这些示例能够帮助您理解如何在jQuery中添加、编辑和删除表格行。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何在jQuery中添加编辑和删除表行 - Python技术站

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

示例1：添加表格行

示例2：编辑和删除表格行

相关文章