--- highlight: arduino-light theme: channing-cyan --- # 组件化的可编辑数据表格 ## 引言页面中的数据表格通常承载了用户所需的数据，通常用户需要根据实际情况对部分数据进行修改，本文旨在介绍一种基于组件化思想的可编辑数据表格的设计与实现。在该组件中，用户可以通过点击表格中的可编辑单元格进行修改，并且可以通过JSON动态配置可编辑列、验证规则、样式等可配置项。本项目基于原生JS+HTML+CSS实现，没有额外技术栈，主要锻炼原生JS业务代码编写能力。 ## 初步实现由于功能可拆分为核心和非核心部分，所以整体设计上采取迭代的方式，首先完成核心功能，即如下功能： 1. 当点击表格中可编辑数据时，在当前单元格中显示文本框并在其中显示原数据，从而为用户提供修改该数据的输入域 1. 在编辑模式下点击文本框之外的任何区域即可确认输入 1. 在编辑模式下输入数据不符合要求时，应该给出适当的提示，并强制改正后方可确认输入初步表格实现的原型展示：[可编辑表格及说明 (axshare.com)](https://hw024q.axshare.com/#id=vqqdn0&p=%E5%8F%AF%E7%BC%96%E8%BE%91%E8%A1%A8%E6%A0%BC%E5%8F%8A%E8%AF%B4%E6%98%8E) 首先我们将数据写死在HTML中，用于验证核心功能： ```

学号	姓名	班级	语文成绩	数学成绩	英语成绩
001	陈思颖	一班	85	92	88
002	赵果	二班	78	89	90
003	王婷	三班	92	86	85
004	李磊	一班	80	87	79
005	张丹	二班	89	90	92
006	刘谦	三班	86	87	91
007	黄晓鹏	一班	75	82	78
008	郭林	二班	91	94	93
009	黄文静	三班	87	85	82
010	李晓宇	一班	84	88	77

``` 要提示错误信息，还需要一个弹窗 ```

输入有误哦！请重新输入

``` 在写业务前，将需要用到的DOM元素写在前面做好准备： ``` //获取成绩和班级元素 let chineseGrade = document.querySelector(".chineseGrade"); let mathGrade = document.querySelector(".mathGrade"); let englishGrade = document.querySelector(".englishGrade"); let bj = document.querySelector(".bj"); let studentId = document.querySelector(".studentId"); let Grade = document.querySelector(".Grade"); //获取需要的表单元素 let table = document.querySelector("table"); let tbody = table.children[1]; let sort = document.querySelector(".sort span"); ``` 下面就进入业务逻辑分析：要实现点击表格数据编辑，需要给每个表格项添加点击事件，在点击时生成一个input输入框，并自动聚焦，且显示表格中当前格的数据，方便编辑，失焦后自动保存，将input的内容放在表格中，删除input元素，实现以上功能的代码如下： ``` function addClick() { var trs = document.querySelectorAll("tbody tr"); trs.forEach((e) => { e.querySelectorAll("td").forEach((x, i) => { if (i < 6 && i >= 3) { x.onclick = function () { let score = x.innerText; input = document.createElement("input"); input.value = score; x.innerText = ""; x.appendChild(input); input.focus(); input.onblur = function () { var keys; if (input.value < 0 || input.value > 100) { document.querySelector(".error").style.display = "block"; setTimeout(() => { document.querySelector(".error").style.display = "none"; }, 2000); } else { document.querySelector(".error").style.display = "none"; data.forEach((num, ind) => { if (x.parentElement.children[0].innerText == num["学号"]) { keys = Object.keys(data[ind]); data[ind][ keys[Array.from(x.parentElement.children).indexOf(x)] ] = input.value; data[ind]["总成绩"] = Number(data[ind][keys[3]]) + Number(data[ind][keys[4]]) + Number(data[ind][keys[5]]); } }); input.remove(); updataHtml(); } }; input.onclick = function (e) { e.stopPropagation(); }; }; } }); }); } ``` 需要注意的是，由于input是表格元素的子组件，默认点击事件会产生冒泡触发父元素的点击事件（即产生输入框并聚焦），所以需要用`stopPropagation()`阻止冒泡产生。其中包含数据验证，在数据错误时，弹出提示框： ``` if (input.value < 0 || input.value > 100) { document.querySelector(".error").style.display = "block"; setTimeout(() => { document.querySelector(".error").style.display = "none";}, 2000);} else { document.querySelector(".error").style.display = "none"; } ``` 在正确时，更新html结构，将临时data中的数据响应到DOM上： ``` function updataHtml() { tbody.innerHTML = ""; data.forEach((e) => { let tr = document.createElement("tr"); for (const i in e) { let td = document.createElement("td"); td.innerHTML = e[i]; tr.appendChild(td); } tbody.appendChild(tr); }); addClick(); } ``` 至此表格的基础功能完成，需要注意的是，在进行输入数据更新时，最好将数据存入临时变量中，最后再整体跟新数据，这样方便后期功能的迭代。 ## 添枝加叶完成了核心功能，其中我最想实现的是排序功能，首先应该在html中显示排序信息： ```

当前排序状态:学号升序

``` 排序的方式有很多，我使用的是sort操作数组排序，然后将数组反应到dom结构中： ``` //记录点击次数，偶数为升序排列，奇数为降序排列 let clickNum = 0; //点击语文成绩排序 chineseGrade.addEventListener("click", () => { clickNum++; if (clickNum % 2 === 0) { sort.innerText = "语文成绩升序"; data.sort((a, b) => { return a.语文成绩 - b.语文成绩; }); } else { sort.innerText = "语文成绩降序"; data.sort((a, b) => { return b.语文成绩 - a.语文成绩; }); } updataHtml(); }); //点击数学成绩排序 mathGrade.addEventListener("click", () => { clickNum++; if (clickNum % 2 === 0) { sort.innerText = "数学成绩升序"; data.sort((a, b) => { return a.数学成绩 - b.数学成绩; }); } else { data.sort((a, b) => { sort.innerText = "数学成绩降序"; return b.数学成绩 - a.数学成绩; }); } updataHtml(); }); //点击英语成绩排序 englishGrade.addEventListener("click", () => { clickNum++; if (clickNum % 2 === 0) { sort.innerText = "英语成绩升序"; data.sort((a, b) => { return a.英语成绩 - b.英语成绩; }); } else { sort.innerText = "英语成绩降序"; data.sort((a, b) => { return b.英语成绩 - a.英语成绩; }); } updataHtml(); }); //点击学号排序 studentId.addEventListener("click", () => { clickNum++; if (clickNum % 2 === 0) { data.sort((a, b) => { sort.innerText = "学号升序"; return a.学号 - b.学号; }); } else { sort.innerText = "学号降序"; data.sort((a, b) => { return b.学号 - a.学号; }); } updataHtml(); }); //点击总成绩排序 Grade.addEventListener("click", () => { clickNum++; if (clickNum % 2 === 0) { sort.innerText = "总成绩升序"; data.sort((a, b) => { return a.总成绩 - b.总成绩; }); } else { sort.innerText = "总成绩降序"; data.sort((a, b) => { return b.总成绩 - a.总成绩; }); } updataHtml(); }); //点击班级排序. bj.addEventListener("click", () => { clickNum++; if (clickNum % 2 === 0) { sort.innerText = "班级升序"; data.sort((a, b) => { return transform(a.班级) - transform(b.班级); }); } else { sort.innerText = "班级降序"; data.sort((a, b) => { return transform(b.班级) - transform(a.班级); }); } updataHtml(); }); //把班级字符串转换为数字进行排序 function transform(a) { let anser = 0; switch (a[0]) { case "一": anser = 1; break; case "二": anser = 2; break; case "三": anser = 3; break; case "四": anser = 4; break; case "五": anser = 5; break; case "六": anser = 6; break; default: break; } return anser; } ``` 此处每一列的数据都单独写了排序函数，但是后期可以优化合并成一个排序方式，值得注意的是，班级在表格中用汉字的一二三四表示，所以需要自定义字码表，这样才可对汉字的数字大小进行排序，如果用unicode或ASCII码比大小，汉字的一二三四并没有在其中按照大小编码当然排序功能全凭个人意愿来写，但是添枝加叶的主要需要实现功能如下： 1. 假设表格中要显示的数据来自服务端，由 JSON 格式表示，格式如下： [{pro1:val1,pro2:val2,pro3:val3,…},{pro1:val1,pro2:val2,pro3:val3, …},{pro1:val1,pro2:val2,pro3:val3,…},…] 1. 通过以上 JSON 格式的数组（数据自拟，建议数据对象不少于 3 个属性）生成可编辑表格，并且能灵活配置可编辑的数据列。 1. 能分别为不同的可编辑列提供验证规则。 1. 能配置和实现数据行的可删除操作。 1. 以上2、3、4均需提供默认配置，以简化可编辑表格函数的参数传递。 1. 数据修改能直接映射到从 JSON 生成的数据对象（该对象可作为缓存，以备提交到服务器）中。我们定义好json文件,用于动态生成表格，格式如下： ``` { "head": [ { "item": "学号", "editable": false, "sortable": true, "pattern": "^\d{3}$" }, { "item": "姓名", "editable": false, "sortable": false, "pattern": "^.{2,4}$" }, { "item": "班级", "editable": false, "sortable": true, "pattern": "^\d{1,2}班$" }, { "item": "语文", "editable": true, "sortable": true, "pattern": "^150$|^(\d|[1-9]\d|1[0-4]\d)(\.5)?$" }, { "item": "数学", "editable": true, "sortable": true, "pattern": "^150$|^(\d|[1-9]\d|1[0-4]\d)(\.5)?$" }, { "item": "英语", "editable": true, "sortable": true, "pattern": "^([0-9]{1,2}$)|(^[0-9]{1,2}\.5$)|100$" }, { "item": "总成绩", "editable": false, "sortable": true } ], "students": [ ["001", "张丽华", "3班", 85, 76, 91], ["002", "陈大明", "6班", 92, 85, 79],... ] } ``` json中head数组为表头数据，用于动态生成表头，其中有四个字段： - `item`表示表头文字内容 - `editable`表示列可编辑性 - `sortable`表示列可排序性 - `pattern`表示列的数据验证规则，为正则表达式这样一来，每一列的可排序性，可编辑性，验证规则都可以不同，且都可以根据后端传入数据动态改变 students中每个数组的每个字段和head整体的每个对象item一一对应要进行表格内容的动态生成，那么首先要从json中获取数据，在本项目中使用axios简化获取步骤： ``` //获取成绩数据，localstorage不存在从axio获取 function loadData() { axios.get("./data.json").then((res) => { data = res.data; if (localStorage.getItem("data")) data = JSON.parse(localStorage.data); else { data = res.data; localStorage.data = JSON.stringify(data); } sort.innerText = localStorage.sort || sort.innerText; } ``` 其中sort是存入localstorage中上次的排序状态，以便于在第二次打开时和data数据排序做对应下面将进行动态规则验证编写，其实只需要将之前的手动判断改为正则表达式的test方法返回true或false判断即可 ``` input.onblur = function () { if ( data.head[i].pattern && !RegExp(data.head[i].pattern).test(input.value) ) { document.querySelector(".error").style.display = "block"; setTimeout(() => { document.querySelector(".error").style.display = "none"; }, 2000); } else { document.querySelector(".error").style.display = "none"; if (i === 0) { data.students[10 * newcurrentpage - (10 - row)][i] = input.value; } else { data.students[10 * newcurrentpage - (10 - row)][i] = Number(input.value) || input.value; } input.remove(); updataHtml(); } }; ``` 对于可编辑和可排序性，只需在排序函数中加入验证，如果data.head中的对应字段为true则可执行函数，反之则不可： ``` //记录点击次数，偶数为升序排列，奇数为降序排列 let clickNum = 0; function addSort() { i = 0; data.head.forEach((x) => { if (x.sortable) { document.querySelectorAll("table thead tr th").forEach((e) => { if (e.innerText == x.item) { e.onclick = (e) => { clickNum++; if (clickNum % 2 === 0) { //降序 rank(e.target.innerText, clickNum); updataHtml(); } else { //升序 rank(e.target.innerText, clickNum); updataHtml(); } }; } }); } }); } ``` 在这次迭代中，我将所有列的排序方法进行了统一，压缩精简了函数： ``` function rank(e, clickNum) { let index = 0; data.head.forEach((elm) => { if (elm.item === e) { index = data.head.indexOf(elm); return; } }); data.students.sort((a, b) => { if (clickNum % 2 === 0) { sort.innerHTML = `${e}降序`; localStorage.sort = sort.innerHTML = `${e}降序`; return parseFloat(b[index]) - parseFloat(a[index]); } else { sort.innerHTML = `${e}升序`; localStorage.sort = sort.innerHTML = `${e}升序`; return parseFloat(a[index]) - parseFloat(b[index]); } }); } ``` 用`parseFloat`函数对数据进行裁剪，这样只要数据中含有数字即可按照此方法排序最后在这一部分需要做的最后功能就是删除和新增功能： ``` //删除行 let ok = document.querySelector(".ok"); let error = document.querySelector(".error"); let del = document.querySelector(".delete"); let delBtn = document.querySelector(".del button"); let tag = false; delBtn.addEventListener("click", () => { let value = del.value; data.students.forEach((e) => { if (value === e[0]) { tag = true; nowpage = Math.floor((data.students.indexOf(e) + 1) / 10) + 1; if ((data.students.indexOf(e) + 1) / 10 === nowpage - 1) { nowpage--; } if (nowpage === totalpage) { lastpageList.pop(); } data.students.splice(data.students.indexOf(e), 1); btnn(nowpage); ok.style.display = "block"; setTimeout(() => { ok.style.display = "none"; }, 2000); updataHtml(); return 0; } }); if (!tag) { error.style.display = "block"; setTimeout(() => { error.style.display = "none"; }, 2000); } else { tag = false; } }); //增加行 let newdata = document.querySelector(".add"); newdata.onclick = () => { let input = document.querySelector(".input_pop form"); input.innerHTML = ""; data.head.forEach((e) => { if (e.editable == false && e.item != "总成绩") { let div = document.createElement("div"); div.innerText = e.item + "："; let put = document.createElement("input"); put.setAttribute("type", "text"); div.appendChild(put); input.appendChild(div); } }); InputModalPop(); }; ``` 其中一些函数涉及到分页和用户交互性使用，所以将在下一节中解释 ## 最终完善在实现主要功能之后，就是对一些功能进行完善，以及交互性、样式的设计，在上一节中，完成了验证规则和数据的动态生成，但是用户并不能通过更改json的方式来配置列属性，还有在进行新增数据时，需要初始配置不可编辑值，所以我进行了一些交互式弹窗的设计，例如，在进行新增时显示这个弹窗： ![image-20230511162859528](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f62a8999d2542739ba09e52884d9457~tplv-k3u1fbpfcp-zoom-1.image) 此弹窗中表单信息由不可编辑列动态生成，代码见上一部分最后为了达到用户编辑表格列属性，我添加了右键表头事件，效果如下： ![image-20230511163303419](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d2e3b88b2be4d0aac324db94b33c452~tplv-k3u1fbpfcp-zoom-1.image) 其中的内容和data对象中head数据双向绑定，会动态生成，具体实现代码如下： html如下： ``` ``` ``` //增加表头配置 function addConfigure() { let name = document.querySelector(".modal form > div input"); let sortable = document.querySelectorAll( ".modal form div:nth-child(3) input" ); let editable = document.querySelectorAll( ".modal form div:nth-child(2) input" ); let pattern = document.querySelector(".modal form textarea"); document.querySelectorAll("table thead tr th").forEach((e, i) => { e.addEventListener("contextmenu", function (event) { popIndex = i; event.preventDefault(); name.value = data.head[i].item; if (data.head[i].sortable) sortable[0].checked = true; else sortable[1].checked = true; if (data.head[i].editable) editable[0].checked = true; else editable[1].checked = true; pattern.value = data.head[i].pattern || ""; modalPop(); }); }); } //弹出弹窗 function modalPop() { document.querySelector(".mask").style.display = "block"; document.querySelector(".modal").style.display = "block"; document.querySelector(".modal").classList.remove("bounceOut"); document.querySelector(".modal").classList.add("bounceIn"); } ``` 最后，由于数据可能很多，为了控制每页数据数量，我添加了分页组件，由于各部分代码耦合性较高，所以就最终展示完整代码，效果如下 ![image-20230511164328640](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/23b6b802b6f44bb5b43721ebbfbed605~tplv-k3u1fbpfcp-zoom-1.image) 实现效果最终如下： ![image-20230511164914957](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f586626e46494ad8a605af1bd0666c75~tplv-k3u1fbpfcp-zoom-1.image) ## 项目完整代码 html: ``` 可编辑表格

可编辑表格

当前排序状态:学号升序

输入有误哦！请重新输入

成功删除

表格说明

1.默认前三个字段不可改，后三个字段可改，总成绩不可改(可动态配置，有悬停效果即可改)

2.点击表头可以按照对应列排序（成绩/班级/学号/总成绩）

3.编辑确认时,验证编辑成绩,默认语文数学0-150,英语0-100,可右键点击表头编辑验证规则

4.编辑以上成绩后，鼠标点击其他区域则表示确认修改

5.表头添加右键点击事件，可弹出弹窗配置列属性

``` css: ``` * { margin: 0; padding: 0; --border: 2px solid rgba(121, 121, 121, 1); } body { background: url(https://imger.nl/images/2023/04/10/11.jpg); } h1 { font-family: "Rock Salt", cursive; padding: 10px; font-style: italic; caption-side: bottom; color: #1a4303; letter-spacing: 10px; font-size: 50px; text-align: center; } tr, td, th { border: var(--border); font-weight: 600; } th { font-weight: 600; text-align: center; background-color: rgb(215, 228, 184); } .table { width: 50%; position: relative; padding: 0 20px; } table > thead > tr > th, table > tbody > tr > td { width: 90px; height: 45px; font-size: 16px; } table { background-color: rgb(233, 238, 216); text-align: center; border: 2px solid black; border-spacing: 0; border-collapse: collapse; /*设置表格的边框是否被合并为一个单一的边框*/ margin: 0 auto; } input { width: inherit; height: inherit; background-color: #f3f694; border: none; text-align: center; font-family: inherit; font-size: inherit; font-weight: inherit; } .error, .ok { display: none; position: absolute; top: 100px; left: 50%; transform: translate(-50%); width: 160px; text-align: center; padding: 15px 18px; background: rgb(168, 232, 136); border-radius: 20px; font-size: 13px; font-weight: 600; animation-name: move; animation-duration: 2s; animation-fill-mode: forwards; } section { width: 640px; height: 300px; padding: 0 10px; background-image: url("https://imger.nl/images/2023/04/10/6ff8efe01cfd3a2bfec456b8e3471e04.jpg"); opacity: 0.8; background-size: 100%; border: 2px black solid; border-radius: 10px; display: inline-block; position: absolute; top: 250px; right: 3%; } h2 { text-align: center; } p { margin: 20px auto; font-size: 16px; font-weight: 600; } td, th { user-select: none; cursor: pointer; } @keyframes move { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .sort { width: 200px; margin: 0 auto; margin-bottom: 10px; height: 15px; line-height: 15px; text-align: center; padding: 15px 18px; background: rgb(215, 228, 184); border-radius: 10px; font-size: 16px; font-weight: 600; border: var(--border); } .click { text-align: center; } .click button { width: 60px; height: 30px; margin: 5px; border: var(--border); border-radius: 5px; background-color: rgb(233, 238, 216); position: relative; top: -2px; } .click button:hover { background-color: #f3f694; } .pre, .next { width: 60px; height: 30px; margin: 5px; border: var(--border); border-radius: 5px; background-color: rgb(251, 255, 238); } .add { position: absolute; top: 200px; left: 62%; width: 80px; height: 30px; background-color: #c2eea4; border-radius: 5px; border: 2px solid gray; cursor: pointer; font-weight: 600; box-sizing: content-box; } .add:hover { background-color: #f3f694; } .del input { background-color: unset; width: 200px; height: 30px; } .del { position: absolute; top: 200px; left: 68%; border: 2px solid gray; border-radius: 4px; background-color: rgb(215, 228, 184); width: 265px; height: 30px; box-sizing: content-box; } .del > button { width: 60px; border-radius: 0 4px 4px 0; border: none; border-left: 2px solid gray; height: 30px; background-color: #c2eea4; position: relative; top: -1px; font-weight: 600; text-align: center; } .del > button:hover { background-color: #f3f694; } .modal { width: 500px; min-height: 100px; text-align: center; position: fixed; top: 50%; left: 50%; background-color: rgb(233, 238, 216); border: var(--border); margin-left: -250px; margin-top: -100px; z-index: 9; border-radius: 15px; } .mask { width: 100%; height: 100%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.305); backdrop-filter: blur(2px); z-index: 8; } .modal form > div { margin: 10px 0; font-weight: 600; color: #1a4303; } .modal button { width: 60px; height: 30px; margin: 5px; border: var(--border); border-radius: 5px; background-color: rgb(251, 255, 238); } .modal button:hover { background-color: #d1edab; } .modal input[type="text"], textarea { height: 30px; background-color: unset; border: var(--border); border-radius: 5px; line-height: 30px; } textarea { width: 80%; margin-top: 10px; font-family: inherit; font-size: inherit; font-weight: inherit; } .btns { display: inline-block; } ``` js: ``` //获取需要的表单元素 let table = document.querySelector("table"); let thead = table.children[0]; let tbody = table.children[1]; let sort = document.querySelector(".sort span"); let btn = document.querySelector(".btns"); const tableList = []; const pagesize = 10; var newpageList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; var lastpageList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; var page1; var newcurrentpage = 1; var data = []; var popIndex; let totalpage = 0; let nowpage = 0; window.onload = function () { loadData(); }; //获取成绩数据，localstorage不存在从axio获取 function loadData() { axios.get("./data.json").then((res) => { data = res.data; if (localStorage.getItem("data")) data = JSON.parse(localStorage.data); else { data = res.data; localStorage.data = JSON.stringify(data); } sort.innerText = localStorage.sort || sort.innerText; let tr = document.createElement("tr"); data.head.forEach((e) => { let th = document.createElement("th"); th.innerText = e.item; tr.appendChild(th); }); thead.appendChild(tr); data.students.forEach((e) => { let body_tr = document.createElement("tr"); let sum = 0; e.forEach((x) => { let td = document.createElement("td"); td.innerText = x; body_tr.appendChild(td); if (typeof x == "number") sum += x; }); e[e.length] = sum; let td = document.createElement("td"); td.innerText = sum; body_tr.appendChild(td); tbody.appendChild(body_tr); }); btnn(); addClick(); addConfigure(); List(); //显示第一页 }); } //按钮函数 let flag = 0; function btnn(nowpage) { flag++; //拿取数据 if (data.students.length <= 10) { btn.style = "display:none"; } else { const datalength = data.students.length; for (let i = 0; i < datalength; i++) { tableList[i] = i; } const currentPage = 1; totalpage = Math.ceil(datalength / pagesize); page1 = totalpage; pageList = tableList.slice( (currentPage - 1) * pagesize, currentPage * pagesize ); List(); //创建按钮 btn.innerHTML = ""; for (let i = 1; i <= totalpage; i++) { let button = document.createElement("button"); btn.insertBefore(button, btn.querySelector(".next")); button.textContent = i; addbtn(button); if (i == 1 && flag === 1) { button.style = "background-color:rgb(215, 228, 184);"; } if (i === nowpage) { button.style = "background-color:rgb(215, 228, 184);"; } } } } //给按钮增加点击事件 function addbtn(e) { e.onclick = function (e) { clear(); newcurrentpage = Number(e.target.innerText); newpageList = tableList.slice( (newcurrentpage - 1) * pagesize, newcurrentpage * pagesize ); e.target.style = "background-color:rgb(215, 228, 184);"; List(); }; } //更新表头 function updataHead() { thead.innerHTML = ""; let tr = document.createElement("tr"); data.head.forEach((e) => { let th = document.createElement("th"); th.innerText = e.item; tr.appendChild(th); }); thead.appendChild(tr); } //清除样式 function clear() { let allbutton = document.querySelectorAll("button"); for (let i = 0; i < allbutton.length; i++) allbutton[i].style = ""; } //分页函数 function List() { tbody.innerHTML = ""; for (let i = 0; i < newpageList.length; i++) { let body_tr = document.createElement("tr"); tbody.appendChild(body_tr); let sum = 0; for (let j = 0; j < data.head.length; j++) { if (data.students[newpageList[i]]) { let td = document.createElement("td"); td.innerText = data.students[newpageList[i]][j]; body_tr.appendChild(td); if ( typeof data.students[newpageList[i]][j] == "number" && j != data.head.length - 1 ) { if (j != 0) { sum += data.students[newpageList[i]][j]; } } if (j == data.head.length - 1) { td.innerText = sum; } } else { break; } } } addClick(); addSort(); } //增加表头配置 function addConfigure() { let name = document.querySelector(".modal form > div input"); let sortable = document.querySelectorAll( ".modal form div:nth-child(3) input" ); let editable = document.querySelectorAll( ".modal form div:nth-child(2) input" ); let pattern = document.querySelector(".modal form textarea"); document.querySelectorAll("table thead tr th").forEach((e, i) => { e.addEventListener("contextmenu", function (event) { popIndex = i; event.preventDefault(); name.value = data.head[i].item; if (data.head[i].sortable) sortable[0].checked = true; else sortable[1].checked = true; if (data.head[i].editable) editable[0].checked = true; else editable[1].checked = true; pattern.value = data.head[i].pattern || ""; modalPop(); }); }); } //弹出弹窗 function modalPop() { document.querySelector(".mask").style.display = "block"; document.querySelector(".modal").style.display = "block"; document.querySelector(".modal").classList.remove("bounceOut"); document.querySelector(".modal").classList.add("bounceIn"); } function InputModalPop() { document.querySelector(".mask").style.display = "block"; document.querySelector(".input_pop").style.display = "block"; document.querySelector(".input_pop").classList.remove("bounceOut"); document.querySelector(".input_pop").classList.add("bounceIn"); } function InputModalOut(bool) { if (bool) { let div = document.querySelectorAll(".input_pop form div input"); let newtr = []; let unedit = []; data.head.forEach((e, i) => { if (!e.editable && e.item != "总成绩") { unedit.push(i); } }); let j = 0; let flag = 1; for (let i = 0; i < data.head.length; i++) { if ( j < unedit.length && (!div[j].value.trim() || !RegExp(data.head[unedit[j]].pattern).test(div[j].value)) ) { flag = 0; } if (unedit.includes(i)) newtr[i] = div[j++].value; else newtr[i] = ""; } if (flag) { data.students[data.students.length] = newtr; const datalength = data.students.length; for (let i = 0; i < datalength; i++) { tableList[i] = i; } newpageList = tableList.slice( Math.floor((data.students.length - 1) / pagesize) * pagesize, Math.floor((data.students.length - 1) / pagesize) * pagesize + 10 ); updataHtml(); btnn(); clear(); document.querySelector(".mask").style.display = "none"; document.querySelector(".input_pop").classList.remove("bounceIn"); document.querySelector(".input_pop").classList.add("bounceOut"); setTimeout(() => { document.querySelector(".input_pop").style.display = "none"; }, 700); btn.querySelector(":last-child").style = "background-color:rgb(215, 228, 184);"; } else alert("不可编辑列必须有初始值，且符合对应列验证规则！"); } else { document.querySelector(".mask").style.display = "none"; document.querySelector(".input_pop").classList.remove("bounceIn"); document.querySelector(".input_pop").classList.add("bounceOut"); setTimeout(() => { document.querySelector(".input_pop").style.display = "none"; }, 700); } } function modalOut(bool) { document.querySelector(".mask").style.display = "none"; document.querySelector(".modal").classList.remove("bounceIn"); document.querySelector(".modal").classList.add("bounceOut"); setTimeout(() => { document.querySelector(".modal").style.display = "none"; }, 700); if (bool) { let name = document.querySelector(".modal form > div input"); let sortable = document.querySelectorAll( ".modal form div:nth-child(3) input" ); let editable = document.querySelectorAll( ".modal form div:nth-child(2) input" ); let pattern = document.querySelector(".modal form textarea"); data.head[popIndex].item = name.value; data.head[popIndex].pattern = pattern.value; if (sortable[0].checked) data.head[popIndex].sortable = true; else data.head[popIndex].sortable = false; if (editable[0].checked) data.head[popIndex].editable = true; else data.head[popIndex].editable = false; updataHead(); updataHtml(); addSort(); addConfigure(); } } //上一页函数 let pre = document.querySelector(".pre"); pre.addEventListener("click", (e) => { clear(); console.log(e.target); //输出的当前所在页例如 2 newpageList = []; //创建一个空数组 newcurrentpage--; //当前页减一 if (newcurrentpage <= 0) { newcurrentpage = page1; } let allbutton = document.querySelectorAll("button"); console.log(allbutton.values); for (let i = 1; i <= allbutton.length; i++) { if (i == newcurrentpage) { allbutton[i - 1].style = "background-color:rgb(215, 228, 184);"; } } newpageList = tableList.slice( (newcurrentpage - 1) * pagesize, newcurrentpage * pagesize ); //传入数组例如[0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 第一页 e.stopPropagation(); List(); //调用分页函数 }); //下一页函数 let next = document.querySelector(".next"); next.addEventListener("click", (e) => { clear(); console.log(newcurrentpage); //输出的当前所在页例如 2 newpageList = []; //创建一个空数组 newcurrentpage++; //当前页加一 if (newcurrentpage > page1) { newcurrentpage = 1; } console.log(newcurrentpage); //输出 1 let allbutton = document.querySelectorAll("button"); for (let i = 1; i <= allbutton.length; i++) { if (i == newcurrentpage) { allbutton[i - 1].style = "background-color:rgb(215, 228, 184);"; } } newpageList = tableList.slice( (newcurrentpage - 1) * pagesize, newcurrentpage * pagesize ); //传入数组例如[0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 第一页 e.stopPropagation(); List(); //调用分页函数 }); //记录点击次数，偶数为升序排列，奇数为降序排列 let clickNum = 0; function addSort() { i = 0; data.head.forEach((x) => { if (x.sortable) { document.querySelectorAll("table thead tr th").forEach((e) => { if (e.innerText == x.item) { e.onclick = (e) => { clickNum++; if (clickNum % 2 === 0) { //降序 rank(e.target.innerText, clickNum); updataHtml(); } else { //升序 rank(e.target.innerText, clickNum); updataHtml(); } }; } }); } }); } //排序 function rank(e, clickNum) { let index = 0; data.head.forEach((elm) => { if (elm.item === e) { index = data.head.indexOf(elm); return; } }); data.students.sort((a, b) => { if (clickNum % 2 === 0) { sort.innerHTML = `${e}降序`; localStorage.sort = sort.innerHTML = `${e}降序`; return parseFloat(b[index]) - parseFloat(a[index]); } else { sort.innerHTML = `${e}升序`; localStorage.sort = sort.innerHTML = `${e}升序`; return parseFloat(a[index]) - parseFloat(b[index]); } }); } //更新表格 function updataHtml() { let index = 0; data.head.forEach((e) => { if (e.item === "总成绩") { index = data.head.indexOf(e); } }); tbody.innerHTML = ""; data.students.forEach((e) => { let body_tr = document.createElement("tr"); let sum = 0; e.forEach((x) => { let td = document.createElement("td"); if (e.indexOf(x) === index) { td.innerHTML = sum; } else { if (typeof x == "number") { sum += x; } td.innerHTML = x; } body_tr.appendChild(td); }); e[index] = sum; tbody.appendChild(body_tr); }); localStorage.data = JSON.stringify(data); addSort(); addClick(); List(); } //添加悬停效果 function onHover(x) { x.onmouseenter = function () { this.style.backgroundColor = "#f3f694"; }; x.onmouseleave = function () { this.style.backgroundColor = "unset"; }; } //添加表格点击事件 function addClick() { let index = []; data.head.forEach((e, i) => { if (e.editable) index.push(i); }); var trs = document.querySelectorAll("tbody tr"); trs.forEach((e, row) => { e.querySelectorAll("td").forEach((x, i) => { if (index.includes(i)) { onHover(x); x.onclick = function () { let score = x.innerText; input = document.createElement("input"); input.value = score; if (i == 0) { input.value = score.toString().padStart(3, "0"); } x.innerText = ""; x.appendChild(input); input.focus(); input.select(); input.onblur = function () { if ( data.head[i].pattern && !RegExp(data.head[i].pattern).test(input.value) ) { document.querySelector(".error").style.display = "block"; setTimeout(() => { document.querySelector(".error").style.display = "none"; }, 2000); } else { document.querySelector(".error").style.display = "none"; if (i === 0) { data.students[10 * newcurrentpage - (10 - row)][i] = input.value; } else { data.students[10 * newcurrentpage - (10 - row)][i] = Number(input.value) || input.value; } input.remove(); updataHtml(); } }; input.onclick = function (e) { e.stopPropagation(); }; }; } }); }); } //删除行 let ok = document.querySelector(".ok"); let error = document.querySelector(".error"); let del = document.querySelector(".delete"); let delBtn = document.querySelector(".del button"); let tag = false; delBtn.addEventListener("click", () => { let value = del.value; data.students.forEach((e) => { if (value === e[0]) { tag = true; nowpage = Math.floor((data.students.indexOf(e) + 1) / 10) + 1; if ((data.students.indexOf(e) + 1) / 10 === nowpage - 1) { nowpage--; } if (nowpage === totalpage) { lastpageList.pop(); } data.students.splice(data.students.indexOf(e), 1); btnn(nowpage); ok.style.display = "block"; setTimeout(() => { ok.style.display = "none"; }, 2000); updataHtml(); return 0; } }); if (!tag) { error.style.display = "block"; setTimeout(() => { error.style.display = "none"; }, 2000); } else { tag = false; } }); //增加行 let newdata = document.querySelector(".add"); newdata.onclick = () => { let input = document.querySelector(".input_pop form"); input.innerHTML = ""; data.head.forEach((e) => { if (e.editable == false && e.item != "总成绩") { let div = document.createElement("div"); div.innerText = e.item + "："; let put = document.createElement("input"); put.setAttribute("type", "text"); div.appendChild(put); input.appendChild(div); } }); InputModalPop(); }; ```

列属性配置

可编辑表格

列属性配置

新增行不可编辑列初始值配置

表格说明