使用 jQuery 从表中添加编辑删除

在网站开发过程中，表格是一个常见的元素。在很多情况下，我们需要通过表格来展示数据，并且允许用户进行编辑、删除等操作。在这个过程中，jQuery是一个非常强大的工具。在本篇文章中，我们将介绍如何使用jQuery来从表中添加、编辑和删除数据。

添加数据

为了在表格中添加数据，我们可以使用jQuery的append()方法。下面是一个示例代码，可以在表格末尾添加一行数据：

$("#myTable tbody").append("<tr><td>John</td><td>Doe</td><td>john@example.com</td></tr>");

上述代码中，我们首先通过$()选择器选中表格中的元素，然后使用append()方法在其中添加了一行数据。

如果我们需要从一个表单中提取数据并添加到表格中，我们可以使用jQuery的serialize()方法来序列化表单数据。以下代码是一个将表单数据添加到表格的示例：

$("#myForm").submit(function(event) {
    event.preventDefault();
    var formData = $(this).serialize();
    $("#myTable tbody").append("<tr>" + formData + "</tr>");
});

在这个代码中，我们首先使用submit()方法来捕获表单提交事件。然后使用preventDefault()方法来阻止表单的默认提交行为，以便我们可以自行处理数据。接下来，我们使用serialize()方法来序列化表单数据，并将其添加到表格中。

编辑数据

当需要编辑某一行的数据时，我们可以在单击该行数据时将其提取到一个表单中。一般情况下，我们会在表单中显示当前数据，并允许用户对其进行修改。以下是通过双击表格行来编辑数据的示例：

$("#myTable tbody").on("dblclick", "tr", function() {
    var rowData = $(this).children("td").map(function() {
        return $(this).text();
    }).get();

    $("#myForm input[name='firstName']").val(rowData[0]);
    $("#myForm input[name='lastName']").val(rowData[1]);
    $("#myForm input[name='email']").val(rowData[2]);

    $(this).addClass("editMode");
});

在这个代码中，我们使用了on()方法来捕获double-click事件。当用户双击表格某一行时，该行数据会被提取到一个表单中。我们首先通过children()方法来获取该行中的所有<td>元素，然后使用map()方法将每个元素的文本值提取出来。最后，我们将这些值填充到表单中，并将该行的css类修改为“editMode”。

保存更新的数据

当用户编辑了一行数据并确认保存时，我们需要将这些数据更新到表格中。在下面的代码中，我们将在表单提交时更新表格数据：

$("#myForm").submit(function(event) {
    event.preventDefault();

    if ($(this).hasClass("editMode")) {
        var rowData = $(this).serializeArray();
        var editedRow = $("#myTable tbody tr.editMode");

        for (var i = 0; i < rowData.length; i++) {
            editedRow.children("td." + rowData[i].name).text(rowData[i].value);
        }

        $(this).removeClass("editMode");
    } else {
        var formData = $(this).serialize();
        $("#myTable tbody").append("<tr>" + formData + "</tr>");
    }

    this.reset();
});

在这个代码中，我们首先检查当前表单是否处于编辑模式。如果是，则从表单中提取数据，并更新表格数据。在这个例子中，我们将表单元素的name属性与表格中元素的css类进行匹配，并使用text()方法更新对应的元素。如果表单不处于编辑模式，则将表单数据添加到表格中。

最后，使用reset()方法来清空表单元素。

删除数据

最后，我们需要提供一种方式来从表格中删除数据。一般来说，我们会在每行数据前面添加一个删除按钮。当用户单击该按钮时，我们将删除该行数据。以下是删除功能的示例代码：

$("#myTable tbody").on("click", ".btn-delete", function() {
    $(this).closest("tr").remove();
});

在这个代码中，我们使用closest()方法来查找最近的<tr>元素，并将其从DOM树中删除。我们还使用了on()方法来捕获单击事件，而不是为每个删除按钮单独绑定事件处理函数。这样做可以提高性能，并减少代码量。

在本文中，我们介绍了如何使用jQuery从表格中添加、编辑和删除数据。虽然这只是一个简单的示例，但是它演示了jQuery的强大功能和灵活性，让我们在网站开发过程中更加轻松地处理表格数据。