组件化的可编辑数据表格

最新推荐文章于 2024-05-19 09:42:48 发布

FANSAOGUANG

最新推荐文章于 2024-05-19 09:42:48 发布

阅读量28

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/FANSAOGUANG/article/details/130666255

版权

一、设计思路：

首先创建一个含表头的表单
利用json-server和axios进行表格数据的获取，利用模板字符串生成对应的行列
设置相关的配置项（哪些列可编辑、编辑时的验证规则等）
设置一个函数setEditable()来设置哪些列可以编辑
编辑时需要利用正则表达式验证是否符合修改规则
在编辑后利用axios发送请求将json文件中的数据更新

二、具体实现：

1.html结构：

<body>
    <div class="form">
      <table class="table">
        <thead>
          <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
            <th>理综</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

    <script></script>
    <script src="./axios.js"></script>
    <script src="./index-(1).js"></script>
  </body>

2.axios获取表格数据：

//创建axios实例 instance
const instance = axios.create({
  //该地址为默认的地址
  baseURL: "http://localhost:3000/t_grades",
});

function getEnrollments() {
  instance.get("http://localhost:3000/t_grades").then((res) => {
    const Table = document.querySelector(".table");
    Table.tBodies[0].innerHTML = "";
    const jsonData = res.data; // 响应数据
    console.log(res.data, 2);
    var trs = "";
    jsonData.forEach((item) => {
      // 从关联表中获取学生姓名和课程名称
      const studentId = item.id;
      const studentName = item.Student_name;
      const studentSex = item.Student_sex;
      const chinese = item.Chinese_score;
      const math = item.Math_score;
      const english = item.English_score;
      const consolidation = item.consolidation_score;
      // 创建一行表格，并将选课数据添加到其中
      const row = `<tr>
                                <td>${studentId}</td>
                                <td>${studentName}</td>
                                <td>${studentSex}</td>
                                <td>${chinese}</td>
                                <td>${math}</td>
                                <td>${english}</td>
                                <td>${consolidation}</td>
                                <td><button class='delete' id = ${item.id}>删除</button></td>
                            </tr>`;
      // 将这一行添加到表格中
      trs += row;
    });
    Table.tBodies[0].innerHTML = trs;
    handleOper();
    setEditable(editable);
    totalTable();
    last();
  });
}

getEnrollments();

3.可配置项的设置

// 配置项
let jsonData = "";
let editable = [2, 3, 4, 5, 6]; //可编辑的列数 第 3 4 5 6列
let Regnum = /^(1[0-4][0-9]|150)$|^([1-9][0-9])$|^[0-9]$/; //正则表达式判断
let Regsex = /^(男|女){1}$/; //正则表达式判断性别
let Regnum_300 = /^([1-2][0-9][0-9]|300)$|^([1-9][0-9])$|^[0-9]$/; //正则表达式判断0-300

4.设置可编辑的单元格：

// 1.设置可编辑单元格——setEditable
function setEditable(editable) {
  let table = document.querySelector("table");
  var row_num = table.rows.length; // 获取表格行数
  for (let i = 1; i < row_num; i++) {
    let column_num = table.rows[i].cells; //获取表格列数
    let e = editable;
    editable.forEach((element) => {
      column_num[element].setAttribute("name", "editable");
    });
  }
  // click(); //点击时
}

5.点击单元格进行编辑时判断利用哪个正则表达式，并调用更新函数

 function click() {
    let editcells = document.getElementsByName("editable");
    console.log(editcells, 1);
    for (let i = 0; i < editcells.length; i++) {
      if (i == 0 || i == 5 || i == 10 || i == 15) {
        editcells[i].onclick = function () {
          updateCell(this, Regsex);
        };
      } else if (i == 4 || i == 9 || i == 14 || 19) {
        editcells[i].onclick = function () {
          updateCell(this, Regnum_300);
        };
      } else {
        editcells[i].onclick = function () {
          updateCell(this, Regnum);
        };
      }
    }
  }

6.更新函数（此处暂时只能判断是否符合修改规则，进行单元格数据的修改，没有利用axios发送post请求进行json文件数据的更改）

// 3.数据更新、验证规则——updateCell
  function updateCell(element, Reg) {
    if (document.getElementsByClassName("new_input").length == 0) {
      //  获取当前数据
      let old_value = element.innerText;
      element.innerHTML = "";

      // 创建新元素input
      var input = document.createElement("input");
      input.value = old_value;
      input.setAttribute("class", "new_input");
      input.type = "text";
      element.appendChild(input);

      input.focus();
      // 失去焦点时——确认修改
      input.onblur = function () {
        // this.value = parseFloat(this.value);
        console.log(this.value);
        console.log(this.type);
        // 判断是否符合修改规则
        /* if (isNaN(this.value)) {
          this.value = old_value;
        } else { */
        if (!Reg.test(this.value)) {
          console.log("error", this.value, Reg);
          this.value = old_value;
          // updateData()
          // 错误提示
          alert("不符合规则");
          this.classList.remove("new_input");
          return;
        } else {
          element.innerHTML = this.value;
        }
        // }
        // document.querySelector(".new_input").remove();
      };
    } else {
      console.log("ERROR-input.length!=0");
    }
  }
  function updateData() {
    //利用instance.post().then()更新json数据
  }