组件化的可编辑数据表格

设计思路

1.使用dom渲染生成表格结构和从本地json文件中获取数据，编写带有修改功能、删除功能及计算功能的函数，各个函数都设置绑定上相应的事件。

实现方法

首先用ajax去请求本地json文件中的数据，获取到数据后分别用dom去渲染好表格内容，对各个功能模块编写功能函数，核心都是获取到数据的dom节点，并对其操作；最后设置报错提示和对数据的判断。

核心代码

1.读取数据

let stutable = document.getElementsByClassName("table")[0];
    let stutable_title = stutable
      .getElementsByTagName("thead")[0]
      .getElementsByTagName("tr")[0]; // 获取th标题行
    let stutable_grade = stutable.getElementsByTagName("tbody")[0]; // 获取tbody
    let stu_trs = stutable_grade.getElementsByTagName("tr"); // 获取tbody的tr标签

    var title_data = []; // 存放标题数据
    var grade_data = []; // 存放成绩数据
    let delbtns = document.getElementsByTagName("button");

    var editcell = document.getElementsByName("editable"); // 可编辑的单元格
    var grades = document.getElementsByClassName("grade"); // 需要计算的单元格
    var thetips = document.getElementsByClassName("err")[0];
    var alltr = document.getElementsByTagName("tr"); // 获取HTML中所有的tr标签

    // 读取本地json数据
    let ajax = new XMLHttpRequest();
    ajax.open("GET", "data.json");
    ajax.send();
    ajax.onreadystatechange = function () {
      if (ajax.readyState == 4 && ajax.status == 200) {
        let alldata = JSON.parse(ajax.responseText);
        title_data.push(alldata.t_title); // 学生信息栏数据
        grade_data.push(alldata.t_grades); // 学生成绩栏数据
        getHtml(); // 生成HTML
      }
    };

2.渲染表格内容

 // 渲染DOM内容
    function getHtml() {
      let titlekey, gradekey; // 用于存放对象的key
      // 表头
      for (item of title_data) {
        for (let i = 0; i < item.length; i++) {
          titlekey = Object.values(item[i]); // 取出表头数据
          let temp_title = `
                    <th>${titlekey}</th>
                   `;
          stutable_title.insertAdjacentHTML("beforeend", temp_title);
        }
      }
      // 表格内容
      for (item of grade_data) {
        for (let i = 0; i < item.length; i++) {
          gradekey = Object.keys(item[i]);
          let temp_grade = `<tr>`;
          // console.log(gradekey); // 获取到的key数组
          for (let j in gradekey) {
            let k = gradekey[j]; // 获取到的key值
            // console.log(item[i][k]); // 取出对象中的值

            // 判断是否是最后一个键名
            if (j == gradekey.length - 1) {
              temp_grade += `<td>${item[i][k]}</td></tr>`;
            } else {
              temp_grade += `<td>${item[i][k]}</td>`;
            }
          }
          stutable_grade.insertAdjacentHTML("beforeend", temp_grade);
        }
      }
      totalScoreBar(); // 生成总分栏
      setAllScore([2, 3, 4, 5, 6, 7]); // 设置需要计算总分的学科
      setEditable([2, 3, 4, 5, 6, 7]); // 设置可编辑单元格
      updateScore(); // 更新总分
      actionBar(); // 生成操作栏
    }

3.功能模块

// 更新单元格内容
    function updateCell(ele, scorearr) {
      let scoreMax = scorearr[ele.cellIndex - 2];
      scoreMax = scoreMax || 100;
      console.log("当前科目的满分是：" + scoreMax);
      if (document.getElementsByClassName("active-input").length == 0) {
        var oldhtml = ele.innerHTML;
        ele.innerHTML = "";
        var newInput = document.createElement("input");
        newInput.setAttribute("class", "active-input");
        newInput.value = oldhtml;
        newInput.onblur = function () {
          this.value = parseFloat(this.value);
          if (this.value < 0 || this.value > scoreMax) {
            console.log("err");
            addAnimate();
            thetips.style.display = "block";
            return;
          } else {
            thetips.style.display = "none";
            ele.innerHTML = this.value == oldhtml ? oldhtml : this.value;

            /*    映射数据表    */
            // 取出当前单元格数据
            let ediId = ele.parentNode.children[0].innerHTML; // 获取当前修改的单元格的id
            // console.log(ediId);
            for (item of grade_data) {
              for (let i = 0; i < item.length; i++) {
                // 取出数据集的所有键名
                let gradekey = Object.keys(item[i]);
                // console.log(item[i].id); // 取出数据集的id
                // console.log(ele.cellIndex); // 输出当前单元格所在行的列数
                if (item[i].id == ediId) {
                  item[i][gradekey[ele.cellIndex]] = parseFloat(this.value);
                }
              }
            }
            console.log("修改后的数据是：", grade_data);
            updateScore();
          }
        };
        newInput.select();
        ele.appendChild(newInput);
        newInput.focus();
      } else {
        return;
      }
    }
// 删除表格行
    function delRow() {
      for (let i = 0; i < delbtns.length; i++) {
        delbtns[i].onclick = function () {
          let rowindex = this.parentNode.parentNode.rowIndex; // 获取当前行
          let delindex = rowindex - 1;
          stutable.deleteRow(rowindex);
          /*    映射数据表    */
          let ediId = this.parentNode.parentNode.children[0].innerHTML; // 获取当前单元格的id
          for (item of grade_data) {
            for (let i = 0; i < item.length; i++) {
              if (item[i].id == ediId) {
                item.splice(delindex, 1);
                console.log("删除后的数据是：", grade_data);
              }
            }
          }
        };
      }
    }

总结

通过上手组件化的可编辑数据表格可以学习并掌握到如何运用dom对数据的修改和怎么去建立跟数据文件的联系，在后面基于数据开发的web界面核心也应该会是怎么样去建立和数据之间的实时联系从而实现数据实时更新。要掌握好ajax方法和dom事件操作