组件化的可编辑数据表格

基于html，css，js实现的可编辑表格

1.效果展示

 表格可以实现的功能有：

1.可编辑表格中的数据

2.可在表头实现对该列的数据设置验证规则

3.可实现新增一行功能

4.可实现输入学号删除对应行

5.实现分页功能

6.点击表头可实现对应列的升序降序功能

2.设计思路

表格中的数据是使用的json文件导入，在JSON 中,对象是一个无序的、键/值对的集合,一个对象以左花括号{开始,以右花括号}结束,左右花括号之间为对象中的若干键/值对，再通过遍历json中的数据就可以获取全部的数据，通过获取json文件中的数据动态的生成表头和表格数据。双击表格数据可以实现修改数据，将输入的数据进行验证是否是正确的输入，错误的输入就提示输入错误，正确的输入就直接将原数据修改；进行删除操作的时候，输入的value与json文件中的数据进行比对，如果相同则删除（数据具有唯一性，id），并提示删除成功；新增行操作时则去判断当前所在的列的表头是否是总成绩，不是则可以直接编辑；分页功能则是获取有多少数据创建一个新的数组，然后将数组每页切割10个，按照索引依次获取数据

3.核心代码

1.获取数据

function loadData() {
  axios.get("./data.json").then((res) => {
    data = res.data;
    if (localStorage.getItem("data")) data = JSON.parse(localStorage.data);//如果localStorage不存在则从axios获取
    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");//去遍历head获取表头
      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(); //显示第一页
  });
}

2.分页函数

function List() {
  tbody.innerHTML = "";
  for (let i = 0; i < newpageList.length; i++) {//newpageList是切割之后得到的一个数组
    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();
}

 3.排序

function rank(e, clickNum) {//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]);
    }
  });
}

4.删除函数

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;
  }
});

5.增加行

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);//在div中增加input
      input.appendChild(div);
    }
  });

  InputModalPop();
};

4.总结

在实现这个可编辑的表格中，学习到了很多的知识，这个表格并不是依靠一个人完成的，而是小组完成的，一个人负责实现一些功能，一开始其实并没有先定统一的变量或者什么规则之类的，所以每一个人在写完自己的功能函数的时候还需要和其他人写的代码进行合并，合并的时候就会出现很多的bug，每一个小功能其实并不困难，主要是要其他人的代码相融合，所以一定需要将代码进行封装，这样不仅方便自己也方便他人。

5.扩展：基于数据的web页面设计

因为页面存在数据，所以应该将页面中的表格尽可能的设置为动态的，在html中不将页面直接固定，而是获取到数据之后再创建所需要的元素，这样可以使代码的使用率更高，并且页面设计也需要和你所要展示的东西相契合，在开发方法上很多其实都是对数据的处理，在js中处理对象的方法有object.key(),object.value()等等，处理数组的方法有find(),findIndex(),filter()等等，只要熟练的掌握这写函数就可以对数据进行很好的处理