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

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

基本思路:

  1. 使用HTML和CSS创建一个表格,注意使用contenteditable属性来规定单元格是否可编辑(值为"true"则可编辑,反之则不可编辑)

  2. 获取第一个单元格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类型

  1. 添加load事件,当网页加载时将savedData渲染到单元格上(若无这一步,数据将无法更新)

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

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

  1. 为表格的每一个可编辑单元格(td)设置forEach回调函数

  2. 为当前回调函数的参数设置失焦事件,并进行数据保存、合法性验证的操作

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;
        }
    });
});
  1. 当加载页面时渲染单元格
js 复制代码
window.addEventListener('load', () => {
    document.querySelectorAll('#editableTable td').forEach(u => {
        const savedData = localStorage.getItem(u.id);
        if (savedData) {
            u.innerHTML = savedData;
        }
    });
    
});
相关推荐
像风一样自由20201 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef064 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder6 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句6 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom6 小时前
JavaScript reduce()函数详解
javascript
小飞悟6 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子6 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手7 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
前端康师傅7 小时前
JavaScript 中你不知道的按位运算
前端·javascript