组件化的可编辑数据表格

1.思路

本次的可编辑数据表格我主要是以json文件作为表格内容，通过dom编程获取到表格的th标题行tbody的tr标签然后定义两个空数组，通过Ajax将表格的标题和内容成绩读取并分别保存在数组title_data和grade_data里。利用数组遍历的方式创建表格，同时在每一行数据的后面添加了删除按钮，通过事件绑定能够实现对表格行删除的操作。

2.主要源码展示

 

 

定义getHTML方法，先取出每一行的数据，对于表格的表头，通过Object.values()直接取出数据，并通过模板字符串直接渲染到页面中。对于表格内容，先获取每一行的键名数组，通过for in取出判断后将对应的数据插入HTML中。

 这里的添加操作栏就是表格后面的删除栏，创建表格时会在每一列最后增加一个删除按钮，同时绑定了删除事件。通过这个按钮能够对整行的表格数据进行删除。

 然后就是更新表格数据了，当我们在操作的时候，我们能够单击可以编辑的单元格进行数据的编写，这里单元格设置了数据的范围一旦输出错误的话会有提示动画出现，输入完毕后保存可以实现一个数据集的更新，但是要在浏览器的控制台下才能够查看到。

 最后就是删除模块，触发点击事件后，会先获取到要删除的这一行，然后执行这个deleteRow（）方法，这个是表格删除行的一个方法，执行完毕后会更新新的表格数据并在控制台上输出出来。

3.总结

本次可编辑表格的实现过程对dom的操作更加熟练，对事件的掌握和添加更加熟悉。

不足之处在于没有实现数据的实时更新，在搭配json-server的时候，无法实现数据的实时更新，同时没有实现对表格的添加操作。