组件化的可编辑表格

设计思路对于可编辑表格，需要首先定义好数据结构和数据类型，包括每个单元格的数据类型、数据校验规则以及默认值等。表格的样式也应该好看，排版也应该具有不同的排版方式，如列数、行数、字体大小等等；样式：表格应该具备较好的可视性，不同的行和单元格可能需要不同的颜色、字号和粗细等；数据格式化：如何将不同的数据类型在表格中进行展示 编辑功能： 对于可编辑表格，主要提供了三种编辑方式，即行内编辑、弹出层编辑和表格外编辑。其中行内编辑通常用于简单文本或者数值编辑， 表格功能：可编辑表格应该支持多种常用的功能，比如最常见的增删查改功能。

明白了我们的设计需求之后那么我们就可以通过css和html对表格的样式以及框架进行搭建，完成基本表格后从后台json数据通过Ajax请求获取数据装入表格中。然后在js代码中对表格添加方法监听，通过js代码设计了表格的删除属性，对总分进行了计算操作。同时需要对表格中数据输入的格式添加正则表达式。

核心代码

获取json数据

使用 XMLHttpRequest 对象向“data2.json”文件发出异步 GET 请求的 JavaScript 代码。当 XMLHttpRequest 对象的状态发生变化时，将触发 onreadystatechange 事件处理程序。当 readyState 为 4 且状态为 200 时，将 responseText 解析为 JSON，并将结果数据存储在变量中。最后gethtml调用该函数以使用数据生成 HTML。

增删数据

使用一个嵌套的 for 循环遍历学生成绩数据，提取每个学生的各科成绩数据。对于每个学生的成绩数据，代码使用 Object.keys() 方法提取出对象属性名，并在一个 for...in 循环中遍历属性名。对于每个属性名，代码从当前学生对象中提取出相应的属性值，并将其添加到一个临时的 HTML 字符串中，形成一个表格单元格。最后，生成的 HTML 字符串被插入到表格中。最后，代码调用一些其他函数，如 totalScoreBar()、setAllScore()、setEditable() 和 updateScore()，用于生成总分栏、设置可编辑单元格、计算总分和更新表格数据等操作。最后，代码设置一个标志变量 flag 为 false，如果标志变量为 true，则调用 actionBar() 方法生成操作栏。

定义了一个名为totalScoreBar()的函数，用于在学生成绩表格的标题行和每一行末尾添加“总分”栏，以便计算每个学生的总分。它首先是创建一个表头单元格元素 allscore，设置其文本内容为“总分”。将allscore添加到表格标题行（即第一行）的末尾。对于表格中的每一行，创建一个单元格元素score，并将其文本内容设置为0，表示该学生的总分初始值为0。将score添加到该行的末尾，并将其设置为可被计算总分的单元格，即为其添加属性rname，并将其值设置为allgrade。

在表格的表头添加“操作”这一列，并在每一行最后一个单元格内添加“删除”按钮。同时，调用了delRow()函数实现了对每一行的删除操作。

定义一个名为 updateScore() 的函数，用于更新总成绩。首先通过获取所有行的元素（除表头）来循环遍历每一行。然后通过获取当前行的所有 td 标签中 class 属性有值的元素和 rname 属性的元素来分别获取该行的成绩和总成绩标签元素，计算出该行成绩的总和，并将总成绩显示在对应的总成绩标签元素中。实现更新所有行总成绩的功能。

 异步编程是指程序在运行过程中不会阻塞其他操作，而是通过回调函数、事件监听、Promise等机制来实现非阻塞式的操作。在这串代码中当调用 readFileWithPromise(path) 时，返回一个 Promise 对象，它将异步读取文件的结果进行封装。该 Promise 对象可以通过 .then() 方法来访问异步操作的成功结果，也可以通过 .catch() 方法来处理异步操作的失败情况

Promise常用于以下几个方面：异步编程：在异步编程中，Promise 用于处理异步操作的结果和状态。通过 Promise，我们可以避免回调地狱问题，使代码更清晰可读，直观易懂。发送 Ajax 请求：使用 Promise 可以发送 Ajax 请求，并根据请求结果来执行相应的操作。这可以大大简化与服务器之间的交互。处理定时器：Promise 可以与定时器一起使用，以解决异步事件的延迟执行。例如，可以使用 Promise 进行延迟加载、轮询或超时。处理数据缓存：Promise 可以实现数据的异步缓存，在需要时将数据从缓存中检索出来。这对于稍后使用的数据进行有效的管理非常有帮助。错误处理：Promise 不仅可以返回异步操作的结果，而且还可以处理任何可能发生的错误。例如，在处理网络请求时，可以使用 Promise 来捕获和处理错误，以便更好地通知用户失败的原因。

async/await 它使异步代码看起来像同步代码：使用 async/await 可以让我们编写异步代码的结构类似于同步代码，让异步操作更加易读和易于维护。等待 Promise 对象执行完成：在异步操作之前添加一个 await，表示需要等待该异步操作完成后才能执行下一行代码。这个特性非常有用，它可以方便地解决一些回调问题。