组件化的可编辑表格

最新推荐文章于 2024-09-16 06:30:00 发布

尤德夸

最新推荐文章于 2024-09-16 06:30:00 发布

阅读量37

点赞数

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/weixin_57782274/article/details/130625891

版权

该文章讲述了如何通过JavaScript从JSON数据中获取信息，利用axios请求数据，然后动态渲染HTML表格，包括创建可编辑的单元格和删除功能。用户输入检查和数据更新通过onblur事件处理，删除操作则通过点击按钮实现。

摘要由CSDN通过智能技术生成

第一步首先准备数据数据

首先我们先将json数据准备好，让后通过axios请求拿到数据再对数据进行渲染。

 [
  {
    studentId: "1101",
    name: "小王",
    Chinese: 98,
    Math: 80,
    English: 91,
  },
  {
    studentId: "1102",
    name: "小曾",
    Chinese: 88,
    Math: 87,
    English: 92,
  },
  {
    studentId: "1103",
    name: "小赵",
    Chinese: 75,
    Math: 90,
    English: 86,
  },
  {
    studentId: "1104",
    name: "小周",
    Chinese: 65,
    Math: 81,
    English: 83,
  },
];

第二步渲染页面

将获取到的数据，先渲染到页面中作为初始页面。我们通过document.createElement("tr")来动态创建表格的小格子。通过数据的数量确定需要添加格子的个数，然后通过innerText来将表头数据填充。通过给每个格子放入input框来进行可编辑操作。并通过value将最开始的数据加载到input中。

  let thead = document.querySelector("thead");
  let tr = document.createElement("tr");
  for (let i = 0; i <= subject.length; i++) {
    let th = document.createElement("th");
    if (i >= 0 && i < subject.length) {
      th.innerHTML = subject[i];
    } else {
      th.innerHTML = "编辑";
      th.style.color = "red";
    }
    th.style.cursor = "not-allowed";
    tr.appendChild(th);
  }
  thead.appendChild(tr);
  // 根据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);
  }

第三步检测表格的编辑情况

通过对表格中的input框绑定失焦事件，来确定用户的输入。当发生失焦事件就代表了用户的一次输入。然后我们需要对用户的输入做出检查。首先我们只允许用户输入0-100的两位小数，不允许输入其他特殊符号，并通过alert弹窗来提示用户，输入数据有误。当用户输入正确数据后我们需要将用户输入的正确数据保存下来，通过ajax发送put请求给json数据添加新数据。当用户输入有误时，我们可以在用户输入完成后提示，并且通过读取原始正确的数据，将正确数据重新恢复到页面上。

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]; //展示到页面
      }
    };
  });

第四步实现表格的可删除

通过对删除按钮绑定事件，来进行删除。我们通过e.target来找到触发事件的目标，然后通过DOM查询找到它整个一行的大节点，然后通过remove移除节点来实现删除。

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