一.设计需求与效果展示

设计需求：

1. 通过json来获取到数据，生成可编辑的学生成绩表格。
2. 表格中的科目成绩点击可编辑，其他列数据不允许修改。
3. 编辑以上成绩后，鼠标点击其他区域则表示确认修改。
4. 编辑确认时，需验证编辑成绩在0~100之间，若超出该区间则提示，并保持不允许修改。
5. 每次修改成绩后，实现总分也相应修改。
6. 实现数据行的可删除操作

效果展示

二.设计思路

首先创建一个json文件，编写上需要的json数据，并通过async函数获取到数据。通过getHtml()函数先取出每一行的数据，对于表格的表头，通过对title_data的遍历直接取出数据，并通过模板字符串直接渲染到页面中。对于表格内容，通过遍历grade_data获取每行数据的键名数组，初始化整个表格。通过updataCell()函数实现更新单元格的内容，并判断修改的内容是否符合条件，不符合则给出相应提示并修改失败。totalScoreBar()函数生成总分栏，并通过updateScore()函数更新总成绩。定义actionBar方法用于在thead里添加操作栏这一列，并在每个tr里添加button标签，实现删除操作。

三.核心代码

• json数据结构以及通过async函数获取json数据分别保存在title_data、grade_data中：

• 通过调用getHtml()遍历title_data、grade_data中的数据拼接成form表格并渲染在html页面中

• 添加总分栏

• 添加删除操作栏

• 给单元格添加点击事件

• 更新单元格内容并判断输入错误

• 更新总成绩

• 删除行操作

四.基于数据的Web页面设计与开发思路和方法

首先需要了解该web页面的概括和目标，再分析需求以及站在用户角度的诉求。根据需求设计表结构，字段，并插入数据。通过后台技术实现网站的数据库及编程功能。前端技术负责网站的展示和交互功能，设计页面时尽量简洁实用，以最高效率的方式将用户所要想得到的信息传送给他，所以要去掉所有的冗余的东西。整体性要好，一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的。交互式要强，发挥网络的优势，是每个使用者都参与到其中来，这样的设计才能算成功的设计。