js根据成绩表数组生成表格。

给定一个数组例如

var data = [

{ StudentNumber: 2022003, Chinese: 86, Math: 64, English: 80, TotalScore: "230", Comment: "D" },

{ StudentNumber: 2022004, Chinese: 78, Math: 99, English: 91, TotalScore: "268", Comment: "D" },

{ StudentNumber: 2022005, Chinese: 107.5, Math: 97, English: 70, TotalScore: "274.5", Comment: "C" },

{ StudentNumber: 2022006, Chinese: 112, Math: 61, English: 92, TotalScore: "265", Comment: "D" },

{ StudentNumber: 2022007, Chinese: 101, Math: 79, English: 104, TotalScore: "284", Comment: "C" },

{ StudentNumber: 2022008, Chinese: 71, Math: 72, English: 105, TotalScore: "248", Comment: "D" },

{ StudentNumber: 2022009, Chinese: 56, Math: 68, English: 61, TotalScore: "185", Comment: "E" },

{ StudentNumber: 2022010, Chinese: 98, Math: 83, English: 77, TotalScore: "258", Comment: "D" }

];

来生成一个表格，结果如下：

数组已经给了总成绩。和评价等级。

代码如下：

首先写css样式：

 <style>* {margin: 0;padding: 0;}.box{margin:100px auto;margin-left: 200px;}.custom-table,.custom-table tr,.custom-table th,.custom-table td {border: 1px solid #bbb;}.custom-table {border-collapse: collapse;text-align: center;}.custom-tavle th,.custom-table td {width: 100px;height: 48px;}</style>

html里面写一个div就可以了

 <div class="box" id='box'></div>

js代码如下：

 <script>var data = [       { StudentNumber: 2022003, Chinese: 86, Math: 64, English: 80, TotalScore: "230", Comment: "D" },{ StudentNumber: 2022004, Chinese: 78, Math: 99, English: 91, TotalScore: "268", Comment: "D" },{ StudentNumber: 2022005, Chinese: 107.5, Math: 97, English: 70, TotalScore: "274.5", Comment: "C" },{ StudentNumber: 2022006, Chinese: 112, Math: 61, English: 92, TotalScore: "265", Comment: "D" },{ StudentNumber: 2022007, Chinese: 101, Math: 79, English: 104, TotalScore: "284", Comment: "C" },{ StudentNumber: 2022008, Chinese: 71, Math: 72, English: 105, TotalScore: "248", Comment: "D" },{ StudentNumber: 2022009, Chinese: 56, Math: 68, English: 61, TotalScore: "185", Comment: "E" },{ StudentNumber: 2022010, Chinese: 98, Math: 83, English: 77, TotalScore: "258", Comment: "D" }];//改写table构造函数，实现数据自动渲染function Table(data){//自身的属性this.data=data;}Table.prototype.createTable=function(){let _data=this.data;var _html ='<table class="custom-table"><tr><th>学号</th><th>语文</th><th>数学</th><th>英语</th><th>总分</th><th>评价</th></tr>';for(let r=0;r<_data.length;r++){_html+='<tr>';for(let c in _data[r]){_html+='<td>'+_data[r][c]+'</td>';}_html+='</tr>';}_html+='</table>';return _html;}var table01=new Table(data);var _box=document.getElementById('box');_box.innerHTML = table01.createTable();</script>

第一层for循环是行数，即成绩数组的长度。

里面的一层for循环是数组里面的元素，由于是{ }包裹的，是对象，没有长度，不可以用和外层一样的++循环方式，而是用数组下标表示确定数值。用for in 来写列数，最后调用就可以。

js根据成绩表数组生成表格。相关推荐

将学生各科成绩表汇总生成学生总成绩表的Python必考题
为了考核学员对 Python Workbook 和 load_workbook 模块学习掌握情况,将学生各科成绩表汇总生成一个新的学生总成绩表几乎成了必练作业或必考题,本文介绍两种方法,供学习参考. ...
python 学生成绩表，生成数据表并且绘图
在学习python的过程中,老师出了一道题,感觉还不错,就写个博客记录一下: 1.已知有50个学生,期末参加5门考试,每一门的权重是(0.3,0.2,0.2,0.2,0.1) 1)随机生成学生基本信息 ...
java生成表_java生成表格图表
项目有个需求是生成上图的表格图表,本来excel很容易生成上边的表格图,但是java poi不支持在服务器端把excel表格导出成图片,在没有找到合适的工具库下,用java 2d实现同样图表. 这个表 ...
JS实现动态生成表格并提交表格数据向后端表格中数据转为json
原文地址需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面d ...
html制作统计期末成绩,JS-结合html综合练习js的对象——班级成绩表制作
对象综合练习 body { font: 14px "微软雅黑"; } span { padding: 5px; } table { margin: 0 auto; border: ...
django通过ajax请求接口返回多条数据，并动态生成表格，请求表单后将表格数据并入库
一.最近在做接口相关的开发,需求是这样的,通过一个接口所需要传递的参数,调用接口后,处理接口响应的参数,返回多条数据,并动态生成表格,请求表单后将表格的数据入库,下面是我改过的代码,跟实际代码有些出入 ...
动态生成表格案例（HTML+CSS+JS）
在这里实现一个动态添加表格的案例,当点击添加按钮时,可以弹出一个表单,然后将输入的内容添加到表格中,也可以将表格中的整行内容清除. 实现思路为:先创建一个表格和一个表单,将表单中输入的 ...
用HTML制作一个漂亮的成绩表,JS-结合html综合练习js的对象——班级成绩表制作...
对象综合练习 body { font: 14px "微软雅黑"; } span { padding: 5px; } table { margin: 0 auto; border: ...
java xml 画表格_用js+xml自动生成表格的东西
摘要:这篇JavaScript栏目下的"用js+xml自动生成表格的东西",介绍的技术点是"JS+XML.自动生成.XML.生成.js.自动",希望对大家开发技 ...

js根据成绩表数组生成表格。

js根据成绩表数组生成表格。相关推荐

最新文章

热门文章