如何用原生JavaScript实现电话本表格数据的编辑功能

实现思路 #

你现在的核心问题是缺少编辑状态标记和提交逻辑的分支判断，只需要做3处修改就能完成编辑功能：

1. 新增全局变量存储当前正在编辑的行元素，用来区分当前是「新增联系人」还是「修改已有联系人」状态
2. 点击编辑按钮回填输入框时，记录当前编辑行、修改提交按钮的文案提示用户当前处于编辑状态
3. 修改原有的新增逻辑，提交时先判断是否有正在编辑的行：有则更新该行内容，没有则走原有新增逻辑

具体代码修改 #

第一步：新增全局变量

在最开头的DOM元素获取部分新增一行：

// 原有DOM变量定义保留，新增下面这行
let currentEditingRow = null;

第二步：修改editBook函数

function editBook(e) {
    if (e.target && e.target.className == 'edit-btn') {
        currentEditingRow = e.target.parentNode.parentNode;
        let editName = currentEditingRow.getElementsByTagName('td')[0];
        let editNumber = currentEditingRow.getElementsByTagName('td')[1];
        // 回填输入框
        nameInput.value = editName.innerHTML;
        numberInput.value = editNumber.innerHTML;
        // 修改提交按钮文案，提示编辑状态
        submitBtn.innerHTML = '保存修改';
        // 可选：增加编辑状态提示
        inputMessage.style.visibility = 'visible';
        inputMessage.innerHTML = '正在编辑联系人';
        inputMessage.classList.add('message');
        inputMessage.classList.remove('error-message');
    }
}

第三步：修改addNumber函数，增加编辑状态判断

function addNumber() {
    if (nameInput.value != '' && numberInput.value != '') {
        // 新增编辑状态判断分支
        if(currentEditingRow) {
            // 更新已有行的内容
            currentEditingRow.getElementsByTagName('td')[0].innerHTML = nameInput.value;
            currentEditingRow.getElementsByTagName('td')[1].innerHTML = numberInput.value;
            // 重置编辑状态
            currentEditingRow = null;
            submitBtn.innerHTML = '添加联系人';
            inputMessage.innerHTML = '联系人修改成功';
        } else {
            // 原有新增联系人的逻辑完全保留
            let newRow = document.createElement('tr');
            let firstCol = document.createElement('td');
            let secondCol = document.createElement('td');
            let thirdCol = document.createElement('td');
            let fourthCol = document.createElement('td');
            let editBtn = document.createElement('button');
            let deleteBtn = document.createElement('button');
            firstCol.innerHTML = nameInput.value;
            secondCol.innerHTML = numberInput.value;
            editBtn.className = 'edit-btn';
            deleteBtn.className = 'delete-btn';
            editBtn.innerHTML = 'Edit';
            deleteBtn.innerHTML = 'Delete';
            table.appendChild(tableBody);
            tableBody.appendChild(newRow);
            newRow.appendChild(firstCol)
            newRow.appendChild(secondCol)
            newRow.appendChild(thirdCol);
            newRow.appendChild(fourthCol);
            thirdCol.appendChild(editBtn);
            fourthCol.appendChild(deleteBtn);
            inputMessage.innerHTML = '联系人添加成功';
        }
        // 通用逻辑抽离，不用重复写
        nameInput.value = '';
        numberInput.value = '';
        inputMessage.style.visibility = 'visible';
        inputMessage.classList.add('message');
        inputMessage.classList.remove('error-message');
    } else {
        inputMessage.style.visibility = 'visible';
        inputMessage.innerHTML = '请填写所有必填项';
        inputMessage.classList.remove('message');
        inputMessage.classList.add('error-message');
    }
}

可选优化 #

如果需要增加取消编辑的功能，可以在表单旁加个取消按钮，点击后清空currentEditingRow、重置输入框、把提交按钮文案改回「添加联系人」即可。

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