组件化的可编辑数据表格

一.效果展示

 二.设计思路

先将页面的基本结构和样式写好，将所有的学生数据信息写在package.json文件中。定义一个空数组，通过Ajax将表格中的内容保存在student中。
通过getStudents()方法从服务端获取数据，由于表头是由HTML直接渲染到页面上不需要从json文件中获取，然后通过axios.get()从json文件中获取学生数据。通过forEach循环获取json文件中student的每个学生的具体信息，赋值给事先定义好的变量（id、name…)，最后通过模板字符串渲染到页面上。
在getStudents()方法中调用changeScore()方法和deleteStu()方法
changeScore()方法：在模板字符串中为存放学生成绩的td标签添加class属性，然后获取所有的td标签，通过for循环为每个td添加点击事件，当点击一个td后，将这个标签的display属性设为none，再创建一个td标签，一个input标签，将input的值填入之前表格中存的分数，将td节点插入到原位置，然后再将创建好的input插入到td节点上，作为子节点。
deleteStu()：在模板字符串的最后一个td标签中再添加一个button标签，通过获取其指定的id值，然后通过axios.delete()从json文件中删除指定id的学生数据。
新增学生数据，获取所有输入学生信息的input标签的value值，然后为button按钮添加点击事件，通过axios.post()向json文件中新增数据。

三.核心代码

 更新单元格内容

删除表格行

 

四.总结与反思 

在做界面的时候内容设置的比较简单，分数的计算完成度实现。删除按键完成度实现。但是输入字符汉字无法识别，表格会变成null，未能解决这个问题。