组件化的可编辑数据表格

一、设计思路

        1.设计表格模板：首先需要确定表格的基本布局和样式，包括表格头部、表格行和列的大小、颜色、字体和对齐方式。

        2.创建表格组件：将表格封装成一个单独的组件。该组件具有输入框或文本框等元素，这些元素可以让用户在表格中进行编辑。

        3.添加编辑功能：为表格添加编辑功能，例如添加或删除行、编辑单元格等，并为这些功能编写事件处理程序来处理用户的操作。

二、实现方法

        定义两个数组，dataList包含要显示在表格中的数据对象，header包含用于表格标题行的标签，其中最后一个元素是用于“操作”列的占位符。

 scoreArray数组定义表格中输入字段的分数范围限制，用classNameList包含表格行类名的列表，n用于设置哪些列为只读。inputdata用于将数据渲染到表格上，并在界面上显示它，是整个组件的核心函数，对dataList数组的遍历，用其中的数据渲染表格节点，并将其附加到页面上。根据数据的类型，它创建了不同类型的表格单元格。

组件初始化函数实现了以下功能：

1.调用setHeader()函数设置表头

2.调用initdata()函数填充数据

3.通过getNode()函数和removeIt()函数实现对行和单元格的编辑和删除操作

4.调用setStyle()函数设置表格样式

5.调用uneditable()函数设置哪些列不能被编辑

 setHeader（）初始化表格头部，在 <thead> 标签内创建一个 <tr>，并往里面插入 <th> 标签。uneditable设置哪些列不可编辑，在函数中循环查找指定列的 DOM 节点（通过 className)，然后为这些节点添加 editable 属性，设置为 false。

initdata （）将数据填进表格中。此函数循环遍历传入的数据数组，为每个数组元素生成一个 <tr> ，在其中循环遍历对象属性。如果 j 在指定的可输入列之间，则为相应的 <td> 标签添加一个 name 属性，标记这些节点为需要检索的 DOM 节点。

 

getNode（）给表格中可编辑的 <td> 标签绑定点击事件，当用户点击这个节点时，触发 edit() 函数将其转换为输入框。removeIt（）给表格中的每个删除按钮绑定点击事件，当用户点击该按钮时，使用 splice() 从数据数组 dataList 中删除该元素，然后重新初始化数据表格。

edit（）在表格中进行编辑操作，下面是它的详解： 

1.首先获取了当前文本框的个数和当前单元格内容的旧值，并获取单元格的类名（即科目名称）。

2.判断当前文本框的个数是否为 0，同时判断当前单元格是否允许编辑（如果存在 editable 属性则代表该单元格允许编辑），如果满足这两个条件，就清空该单元格的内容并创建一个新的文本框。

3.将文本框的类型设置为数字类型，将其初始值设置为单元格的旧值，并为文本框添加一个新的 CSS 类 newinpututClass，然后将文本框添加到单元格中并选中其中的内容。

4.给文本框添加一个失去焦点的事件监听器，该事件的处理程序里面会获取文本框中设置的新值。如果没有设置新值，就将其设置为 0。

5.调用 checkScore 函数检查输入的分数是否符合要求，如果符合，就将单元格的内容设置为新值。然后计算每一行的总分，将其设置为该行倒数第二个单元格的内容。

6.如果输入的分数不符合要求，则显示一个名为 toast 的提示框，并将焦点重新定位到文本框中。2 秒钟后，提示框会消失。