js可编辑表格

前言

本可编辑表格旨在实现以下功能

1. 读取服务器端json数据
2. 可配置数据列的编辑性
3. 不同列不同验证规则
4. 实现删除操作并可以开关
5. 页面上的数据修改能传递到服务器端

在实现该可编辑表格的最大问题在于完成页面数据与json服务器端数据的同步，因为要求数据来自外部的json(模拟服务端)，需要通过外部json数据来生成可编辑表格，因此需要通过ajax来发送请求进行数据的读取和修改后同步（未实现）

实现json数据的读取

        通过get方法读取到本地json文件并将数据格式转换为JavaScript数据格式方便后面处理

let ajax = new XMLHttpRequest();
ajax.open("get", "table2.json");
ajax.send();
ajax.onreadystatechange = function () {
  if (ajax.readyState == 4 && ajax.status == 200) {
    let alldata = JSON.parse(ajax.responseText); //将json数据转换为JavaScript数据
    }
}；

可配置数据列的编辑性

        传入一个数组arr表示可编辑的单元格列。通过for循环先获取表格行和列，再通过arr.forEach()和setAttribute方法给选中的的那一列单元格设置属性name为editable。

// 设置哪些单元格可编辑
function setEditable(arr) {
  //arr 表示可编辑的单元格