这是什么b
用table表格标签渲染总排名和总分数据
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<table border="1">
<tbody>
</tbody>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
}
})
</script>
<script>
// stus = [
// {
// name: 'Bob',
// grade: 98
// },
// {
// name: 'Tom',
// grade: 87
// },
// {
// name: 'Jerry',
// grade: 92
// },
// ];
//
var tbody=document.getElementsByTagName('tbody')
var scores = [
{ name: 'Bob', math: 97, chinese: 89, english: 67 },
{ name: 'Tom', math: 67, chinese: 52, english: 98 },
{ name: 'Jerry', math: 72, chinese: 87, english: 89 },
{ name: 'Ben', math: 92, chinese: 87, english: 59 },
{ name: 'Chan', math: 47, chinese: 85, english: 92 },
];
var Total=[];
// 按照分数进行排名
Total[0] =+scores[0].math+ +scores[0].chinese+ +scores[0].english;
Total[1] =+scores[1].math+ +scores[1].chinese+ +scores[1].english;
Total[2] =+scores[2].math+ +scores[2].chinese+ +scores[2].english;
Total[3] =+scores[3].math+ +scores[3].chinese+ +scores[3].english;
Total[4] =+scores[4].math+ +scores[4].chinese+ +scores[4].english;
for (let i=0; i<scores.length; i++) {
var newTr = document.createElement('tr');
for (let j=0; j<scores.length-i; j++) {
// 处理条件即可
if (Total[j] < Total[j+1]) {
let temp = Total[j];
Total[j] = Total[j + 1];
Total[j + 1] = temp;
}
x=5-j;
newTr.innerHTML='<td>'+ x +'</td><td>'+Total[j]+'</td>';
tbody[0].appendChild(newTr);
}
}
console.log(scores);
</script>
</html>
还是用上方的规则,但是只渲染所有科目及格的学生
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<table border="1">
<tr v-for="(stu,i) in scores" v-if="stu.math>=60 && stu.chinese>=60 && stu.english>=60">
<td>{{ i + 1 }}</td>
<td v-for="v in stu">{{ v }}</td>
</tr>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let scores = [
{name: 'Bob', math: 97, chinese: 89, english: 67},
{name: 'Tom', math: 67, chinese: 52, english: 98},
{name: 'Jerry', math: 72, chinese: 87, english: 89},
{name: 'Ben', math: 92, chinese: 87, english: 59},
{name: 'Chan', math: 47, chinese: 85, english: 92},
];
var Total=[];
for (stu of scores) {
stu.total = stu.math + stu.chinese + stu.english;
Total.push(stu);
}
for (let i=0; i<scores.length; i++) {
// var newTr = document.createElement('tr');
for (let j=0; j<scores.length-i; j++) {
if (Total[j] < Total[j+1]) {
let temp = Total[j];
Total[j] = Total[j + 1];
Total[j + 1] = temp;
}
}
}
new Vue({
el: '#app',
data: {
scores: Total,
}
});
</script>
</html>
随机推荐
- CSS-05 html和body标签
html和body标签 一直对这两个标签有迷惑,查了一些网上资料整理了一下. 1.html和body标签的背景 1.当给body一个背景色时候,背景图是充满整个窗口的,这里看上去是body标签下的背景 ...
- 安卓构架组件——向项目添加组件（Adding Components to your Project）
在开始之前,建议阅读 应用架构指南. Before getting started, we recommend reading the Architecture Components Guide to ...
- 03.LNMP架构-PHP源码包编译部署详细步骤
一.环境准备 操作系统:CentOS_Server_7.5_x64_1804.iso 部署组件:yasm+libmcrypt+libvpx+tiff+libpng+freetype+jpeg+libg ...
- 修改Oracle并行度
什么是并行度: 并行度的优点就是能够最大限度的利用机器的多个cpu资源,是多个cpu同时工作,从而达到提高数据库工作效率的目的.在系统空闲时间,使用并行是个不错的选择,但是好东西总是相对而言,没有绝对 ...
- QT + openssl + VS2015静态编译
从http://slproweb.com/products/Win32OpenSSL.html下载已经编译好的openssl,一路next 我将OpenSSL-Win32\lib\VC目录下的libe ...
- vim/vi编辑工具实现多行注释和取消注释
转载声明:本文为转载文章 原文地址:https://blog.51cto.com/3332935/2106143 多行注释: 进入命令行模式--> 将光标移动到要注释的第一行位置--> 按 ...
- JDBC简单总结
几种常用数据库的JDBC URL 对于 Oracle 数据库连接,采用如下形式: jdbc:oracle:thin:@localhost:1521:sid 对于 SQLServer 数据库连接,采用如 ...
- MySQL添加主键、索引
查看索引 SHOW INDEX FROM 数据库表名 比如:SHOW INDEX FROM order_info; 添加索引 alter table 数据库add index 索引名称(数据库字段 ...
- linux的块设备层
ll_rw_block()是块设备驱动层,向上提供按block读写块设备到某个内存地址的(是以page为目标单位)方法． bread()是块设备缓冲层,磁盘上的block用页缓存．先从这个缓存里找,找 ...
- [ZJOI2019]开关
以下的方案数默认是带权方案数.设\(P=\sum_{i=1}^np_i\). 设\(F(x)\)为按\(i\)次开关后到达终止态的方案数的EGF,\(f\)为\(F\)的OGF,显然\(F(x)=\p ...