实现可编辑表格的思路及优化

先上效果图：实现了一个可编辑表格，可通过点击来选中可编辑的单元格，并在单元格内输入合法的数据（若不合法则弹出一个警告窗口并将数据回退），当鼠标点击单元格外时则保存数据。

基本思路：

使用HTML和CSS创建一个表格，注意使用contenteditable属性来规定单元格是否可编辑（值为"true"则可编辑，反之则不可编辑）
获取第一个单元格id后监听失焦事件，当事件触发时则将该单元格的数据保存到savedDate变量中，之后对变量进行合法性判断，若不为空且数据在0~100内时则将savedDate渲染到该单元格上

js 复制代码

    u1.addEventListener('blur', () => {
    localStorage.setItem('u1_data', u1.innerHTML);
    let savedData = localStorage.getItem('u1_data');
    if (savedData !== null && parseInt(savedData) >= 0 && parseInt(savedData) <= 100) {
        u1.innerHTML = savedData;
    }
    else {
        alert('请输入0~100的数字!');
        u1.innerHTML = dataToSave;
    }
});

注意，在进行合法性判断时需使用parseInt将savedData转换为number类型

添加load事件，当网页加载时将savedData渲染到单元格上（若无这一步，数据将无法更新）

至此我们简单实现了第一个单元格的修改及保存操作，但若要实现所有可编辑单元格的操作，其js代码量非常庞大（需要对每一个元素都绑定事件），那么有没有什么更轻便的方法呢？以下为优化方案

---------------------------------------------以下为优化方案----------------------------------------------

为表格的每一个可编辑单元格（td）设置forEach回调函数
为当前回调函数的参数设置失焦事件，并进行数据保存、合法性验证的操作

js 复制代码

document.querySelectorAll('#editableTable td').forEach(u => {
    const dataToSave = parseInt(u.innerHTML);
    u.addEventListener('blur', function() {
        localStorage.setItem(u.id, u.textContent);
        let savedData = localStorage.getItem(u.id);
        if (savedData !== null && parseInt(savedData) >= 0 && parseInt(savedData) <= 100) {
            u.innerHTML = savedData;
        }
        else {
            alert('请输入正确数据!');
            u.innerHTML = dataToSave;
        }
    });
});

当加载页面时渲染单元格

js 复制代码

window.addEventListener('load', () => {
    document.querySelectorAll('#editableTable td').forEach(u => {
        const savedData = localStorage.getItem(u.id);
        if (savedData) {
            u.innerHTML = savedData;
        }
    });
    
});