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

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

基本思路:

  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;
        }
    });
    
});
相关推荐
LBJ辉40 分钟前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea7 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
hui函数10 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam11 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴85011 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的13 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀13 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce14 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
JSON_L15 小时前
Vue 电影导航组件
前端·javascript·vue.js
xptwop16 小时前
05-ES6
前端·javascript·es6