如何更新表格选中行？已有添加/编辑弹窗回显相关代码

要实现编辑后替换表格行内容，核心是保存要编辑的行引用，在提交编辑请求并成功后，用新数据更新该行的HTML内容。以下是具体实现步骤：

1. 修正编辑按钮的事件绑定（支持动态添加的行） #

原来的直接绑定只能作用于页面加载时已存在的按钮，动态添加的行需要用事件委托来绑定点击事件，同时把要编辑的行存储到模态框的data属性中：

// 改用事件委托，处理静态和动态添加的编辑按钮
$("#personnelTable").on("click", ".editPersonnelBtn", function(e) {
    var $rowToUpdate = $(this).closest("tr");
    // 将目标行存入模态框的data属性，方便后续更新时获取
    $("#editPersonnelModal").data("rowToUpdate", $rowToUpdate);
});

2. 处理编辑表单的提交逻辑 #

给编辑模态框的保存按钮（假设按钮ID为#saveEditPersonnelBtn）绑定点击事件，发送AJAX请求更新后端数据，成功后更新表格行内容：

$("#saveEditPersonnelBtn").click(function() {
    // 获取表单中的新值
    var personnelId = $("#editPersonnelEmployeeID").val();
    var firstName = $("#editPersonnelFirstName").val();
    var lastName = $("#editPersonnelLastName").val();
    var jobTitle = $("#editPersonnelJobTitle").val();
    var email = $("#editPersonnelEmailAddress").val();
    var departmentId = $("#editPersonnelDepartment").val(); // 对应部门选择框ID

    $.ajax({
        url: "php/updatePersonnel.php", // 你的后端更新接口
        type: "POST",
        dataType: "JSON",
        data: {
            id: personnelId,
            firstName: firstName,
            lastName: lastName,
            jobTitle: jobTitle,
            emailAddress: email,
            departmentID: departmentId
        },
        success: function(result) {
            if (result.status.code === 200) {
                // 从模态框取出之前存储的目标行
                var $rowToUpdate = $("#editPersonnelModal").data("rowToUpdate");
                
                // 更新行内第一列的显示内容
                var newCellContent = `${firstName} ${lastName} ${jobTitle} ${email}`;
                $rowToUpdate.find("td:first").text(newCellContent);
                
                // 关闭模态框
                $("#editPersonnelModal").modal("hide");
                // 可选：重置编辑表单
                $("#editPersonnelForm")[0].reset();
            }
        },
        error: function() {
            alert("更新失败，请稍后重试");
        }
    });
});

3. 补充说明 #

• 确保后端的updatePersonnel.php接口能正确接收参数并更新数据库，返回包含status.code: 200的成功响应。
• 如果你的表格列结构有变化，只需调整$rowToUpdate.find("td:first")选择器，定位到需要更新的列即可（比如多列的话可以分别设置每个td的内容）。
• 动态添加行时，编辑按钮的事件会通过事件委托自动绑定，无需额外处理。

内容的提问来源于stack exchange，提问作者user22620875