表格点击Save按钮更新数据后无法退出编辑模式的求助

核心问题 #

1. 错误恢复编辑模式标记
   代码中先执行了row.removeAttribute("data-edit-mode")清除编辑状态，但紧接着又调用row.setAttribute("data-edit-mode", "true")和row.classList.add("editing")，直接重新开启了编辑模式，完全抵消了之前的退出操作。

2. 未替换可编辑单元格的输入控件
   仅切换了操作按钮，但没有将单元格内的<input>/<select>控件替换为更新后的文本内容，导致视觉上仍处于编辑状态。

修复后的代码 #

function saveCV(rowId) {
    var row = document.querySelector("tr[data-id='" + rowId + "']");
    var editableCells = row.querySelectorAll(".editable");

    var formData = new FormData();

    editableCells.forEach(function (cell) {
        var fieldName = cell.getAttribute("data-field");
        var newValue;

        // 合并重复的select判断逻辑，简化代码
        if (fieldName === "cvdate" || !["branch", "booknumber", "costcenter"].includes(fieldName)) {
            var inputElement = cell.querySelector("input");
            newValue = inputElement ? inputElement.value : "";
        } else {
            var selectElement = cell.querySelector("select");
            newValue = selectElement ? selectElement.value : "";
        }

        formData.append(fieldName, newValue);
        // 将输入控件替换为更新后的文本内容
        cell.textContent = newValue;
    });

    var actionsCell = row.querySelector(".center-align-column");
    actionsCell.innerHTML = `
    <button class='edit-button' onclick='editCV(${rowId})'>Edit</button>
    <button class='delete-button' onclick='deleteCV(${rowId})'>Delete</button>`;

    // 彻底清除编辑模式相关标记
    row.removeAttribute("data-edit-mode");
    row.removeAttribute("data-original-values");
    row.classList.remove("editing");

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "updateCV.php?id=" + rowId, true);
    
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                console.log(xhr.responseText);
            } else {
                alert("Failed to update record");
                // 可选：请求失败时恢复编辑状态，提升用户体验
                // editCV(rowId);
            }
        }
    };
    xhr.send(formData);
}

关键修改点 #

• 移除了错误的编辑模式恢复代码，确保保存后彻底退出编辑状态
• 在收集新值的同时，将单元格内的输入控件替换为更新后的文本内容
• 合并重复的判断逻辑，简化代码结构
• 增加了请求失败时的可选恢复逻辑（注释中）

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