组件化的可编辑表格

最新推荐文章于 2024-09-30 15:42:36 发布

m0_58547881

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量61

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_58547881/article/details/130631051

版权

组件化的可编辑表格

一、展示

以上就是可编辑表格的页面展示，在此页面基础上，在课程栏的成绩上点击即可修改，修改以后点击界面任何位置，即可实现修改，总分也会随分数的修改而变化。点击删除按钮，即可删除这一栏的数据。但由于是访问的json文件，并不会对文件内数据进行删除，这也是需要改进的地方。

二、逻辑思路设计

1.通过获取元素的方式获取表格、表头、表格主体、按钮、可编辑单元格、成绩单元格和提示信息等元素。
2.获取 JSON 文件中的数据，并将读取到的表头和成绩数据分别存储到 title_data 和 grade_data 数组中。
3.根据读取到的数据生成表格标题和成绩数据，并进行一些初始化操作。
4.在表格标题中添加 "操作" 标题和 "删除" 按钮，并注册按钮点击事件，在每行学生的成绩单元格中添加删除按钮。
5.当用户输入不合法时，相应的提示信息会显示出来。当用户输入完成后，更新每行学生的总分数。当用户点击删除按钮时，删除相应的行，并更新每行学生的总分数。

三、编码逻辑思路

1. 通过获取元素的方式获取表格、表头、表格主体、按钮、可编辑单元格、成绩单元格和提示信息等元素。
2. 定义异步函数 fetchData，使用 fetch 方法获取 JSON 文件中的数据，并将读取到的表头和成绩数据分别存储到 title_data 和 grade_data 数组中。
3. 定义函数 getHtml，根据读取到的数据生成表格标题和成绩数据，并进行一些初始化操作，包括生成总分列并添加到表头中、设置指定列为可编辑状态、注册单元格点击事件、更新每行学生的总分数等。
4. 在 fetchData 函数中调用 getHtml 函数，生成完整的表格并进行必要的初始化操作。
5. 在 getHtml 函数中设置 flag 为 true，根据其值调用 actionBar 函数。
6. 定义函数 actionBar，在表格标题中添加 "操作" 标题和 "删除" 按钮，并注册按钮点击事件，在每行学生的成绩单元格中添加删除按钮。
7. 当用户点击单元格时，注册的 setCellCilck 函数会将选中的单元格转换为可编辑状态，并在用户输入完成后更新单元格内容。
8. 当用户输入不合法时，相应的提示信息会显示出来。
9. 当用户输入完成后，调用 updateScore 函数更新每行学生的总分数。
10. 当用户点击删除按钮时，调用 delRow 函数删除相应的行，并更新每行学生的总分数。

四、实现方法及核心代码

1.注意准备json文件，在整体代码完成以后在命令行运行json文件以后再运行代码。 2.编写页面body、css使其显示在页面上。

<body> <div id="tableBox"> <h2 class="title">G7-学生成绩表</h2> <div class="wrong" style="display: none;">当前为非数值,请重新输入</div> <div class="wrong1" style="display: none;">超过最大输入,请重新输入</div> <div class="wrong2" style="display: none;">低于最小输入,请重新输入</div> <table class="table" > <thead> <tr> </tr> </thead> <tbody></tbody> </table> </div> </body>

3.获取json文件

这段代码定义了一个异步函数 fetchData，用于通过 fetch 方法获取名为 G7.json 的 JSON 文件中的数据。如果请求成功，则将读取到的表头数据存储到数组 title_data 中，成绩数据存储到数组 grade_data 中，并调用 getHtml 函数生成表格并进行初始化操作。在实现过程中，使用 async 和 await 关键词来处理异步操作，确保获得了可用数据后再执行相关操作。最后，通过调用 fetchData 函数来触发整个流程的执行。 4.渲染DOM内容

首先定义了两个变量 titlekey 和 gradekey。第一个循环使用 for...of 循环遍历 title_data 数组中的每个元素。对于每个元素，使用 for 循环遍历其中的每个对象键值对，然后将对象的值存储在 titlekey 中，并使用模板字符串生成一个包含该值的 HTML 表头单元格元素 temp_title。最后使用 DOM 方法 insertAdjacentHTML() 将该表头单元格插入到指定表格 stutable_title 的末尾。第二个循环使用 for...of 循环遍历 grade_data 数组中的每个元素。对于每个元素，使用 for...in 循环遍历其中的每个对象属性名，然后将对象的属性名存储在 gradekey 中。接着使用模板字符串生成一个包含该对象所有属性值的 HTML 行元素 temp_grade，并根据当前属性名是否是最后一个来判断是否应该在该单元格后添加行结束标签。最后使用 DOM 方法 insertAdjacentHTML() 将该行元素插入到指定表格 stutable_grade 的末尾。 5.更新总成绩

这段代码定义了一个名为 updateScore 的 JavaScript 函数，其作用是更新表格中每个学生的总分数以及对应单元格的显示值。具体来说，接着，使用 Array.from() 方法获取所有行（除表头外）中 name 和 rname 属性所在的列并保存到变量 numSum 和 numSum1 中。然后，使用 reduce() 方法将 numSum 中所有单元格内的数字加起来并返回总和 sum。最后，将 sum 赋值给 numSum1 中所有单元格的内容，并更新该单元格的显示值。

这段代码的作用是添加一个名为“总分”的表头单元格到指定表格 stutable_title 的末尾，并在每一行（对应学生）的最后一个单元格中添加一个初始值为0，并设置该单元格的自定义属性 "r name" 为 "allgrade"。这个操作通常用于表示所有考试或作业的总分数或者平均分等统计信息。

6.为所有可编辑单元格绑定点击事件，并为每个单元格设置一个更新函数和删除行函数。 7.设置可编辑单元格

函数名称 setEditable 也反映了这个目的。具体地，该函数接受一个数组 arr 作为输入参数，该数组包含需要被设置为可编辑状态的列的索引值（从0开始）。对于每一行（即每个学生），该函数遍历指定列的单元格，并为其添加自定义属性 "name"，值为 "editable"，表示该单元格可以被编辑。最后，该函数调用 setCellCilck() 函数，以便为所有可编辑单元格绑定点击事件。这个操作通常用于在表格中提供用户交互功能，例如允许用户修改或输入成绩或其他信息。

7.设计可计算分数的表格列

将指定表格 stutable 中所有包含在输入数组 arr 中的列的单元格添加一个名为 "grade" 的 CSS 类。具体地，该函数使用 Array.from() 方法将表格中所有单元格转换为一个数组 stcells，然后对于每个单元格，如果它所在的列的索引值在输入数组 arr 中，则将其添加一个名为 "grade" 的 CSS 类。

8.处理单元格用户交互

代码定义了一个名为 updateCell 的 JavaScript 函数，其作用是处理表格中某个单元格的用户交互。具体来说，当用户点击该单元格时，函数会检查是否已存在输入框（class 为 active-input），若不存在，则将单元格内容替换为输入框，并聚焦到该输入框中。接着，当用户在输入框中输入数字并失去焦点时，函数会根据输入的数字进行一系列判断

9.添加操作栏

为指定表格 stutable 添加一个名为“操作”的表头单元格，并在每一行（对应学生）的最后一个单元格中添加一个“删除”按钮。

10.删除表格栏

为所有“删除”按钮绑定点击事件，并在点击按钮时删除对应的行。具体地，该函数使用 for 循环遍历所有“删除”按钮，并为其设置 onclick 事件处理程序。对于每个点击事件，该函数首先获取当前行的索引值 rowindex，然后根据该值使用 deleteRow() 方法删除该行。同时，该函数在删除行后还会更新 grade_data 数组中对应学生的成绩记录，即通过遍历 grade_data 中的对象来找到对应学生的数据，并使用数组方法 splice() 删除该行数据。