组件化的可编辑数据表格

最新推荐文章于 2024-10-02 05:39:15 发布

m0_55718253

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量51

点赞数

文章标签： javascript ajax html 编辑器

本文链接：https://blog.csdn.net/m0_55718253/article/details/130475476

版权

1、设计思路

本次翻转是想要设计一个动态的可编辑表格，首先要保证页面的数据是通过Ajax发送请求获取来的数据，而不是在HTML结构里面把数据写死。等数据返回来之后，将允许动态编辑的部分用input框来进行展示，而不允许修改的部分，则是直接展示到页面。并且输入的值也是有要求的，如果不满足输入条件则会弹出提示框来提醒用户输入有误，并且会将错误修改前的值重新呈现在页面中，除非用户输入正确。

2、实现方法

1、HTML结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="table">
      <table>
        <thead></thead>
        <tbody></tbody>
      </table>
    </div>
    <script src="demo.js"></script>
  </body>
</html>

2、通过遍历axios返回回来的json数据，动态的生成表头以及初始化表格内容

3、给所有的tbody里面的input框绑定失去焦点事件，只要失去焦点事件被触发了，就会执行函数体，获取当前失焦表格所在的行和列，然后找到对应表格，就可以进行判断语句，如果输入的值转成Number类型后为NaN，或者输入的值小于0或大于100，就进行弹窗提醒，同时将修改前的初始数据重新渲染到页面对应的表格当中。如果输入合法，就替换掉当前表格的内容，同时也同步修改请求过来的数据。

4、给tbody每一行都绑定删除事件，我们在动态生成模板的时候就在最后一格里面添加了一个删除按钮，当我们点击该按钮应该触发删除事件。先找到父元素tbody，然后再通过点击时候的执行上下文this来找到当前点击的这一行，用removeChild删除点击的当前行，同时修改请求来的students数据。

3、核心代码及注解

  // 根据students动态生成表格内容 初始化
  var arr = Object.keys(students[0]);
  var flag = "";
  var tbody = document.querySelector("tbody");
  for (let i = 0; i < students.length; i++) {
    let tr = document.createElement("tr");
    for (let j = 0; j < 6; j++) {
      flag = arr[j];
      let td = document.createElement("td");
      if (j > 1 && j < 5) {
        td.innerHTML = `<input type='text' value='${students[i][flag]}'/>`;
      } else if (j == 5) {
        td.innerHTML = `<button studentId=${students[i].studentId}>删除</<button>`;
      } else {
        td.innerHTML = students[i][flag];
        td.style.cursor = "not-allowed";
      }
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  }

  // 给所有tbody的input框绑定失去焦点事件
  var inputs = document.querySelectorAll("table input");
  inputs.forEach((item, index) => {
    item.onblur = function () {
      var key,
        flag = 1;
      let row = Math.ceil((index + 1) / 3); //失去焦点时所在的横坐标
      let column = (index % 3) + 1; //失去焦点时所在的纵坐标
      for (let i in students[0]) {
        if (flag == column + 2) {
          key = i;
        }
        flag++;
      }
      // console.log(key);
      if (isNaN(Number(this.value)) || this.value < 0 || this.value > 100) {
        alert("非法操作！");
        console.log(Math.ceil((index + 1) / 3), (index % 3) + 1);
        //   console.log(arr[row - 1].key);
        this.value = students[row - 1][key]; //修改失败，原值不变
      } else {
        students[row - 1][key] = ~~this.value; //修改数据成功
        this.value = students[row - 1][key]; //展示到页面
      }
    };
  });

  // 绑定删除事件
  var buttons = document.querySelectorAll("table button");
  buttons.forEach((item) => {
    item.onclick = function () {
      console.log("更新前的students", students);
      // 删除页面显示的对应行
      tbody.removeChild(this.parentNode.parentNode);
      // 更新students表格
      students = students.filter((element) => {
        return element.studentId !== item.getAttribute("studentId");
      });
      console.log("更新后的students", students);
    };
  });
}