这是什么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>
随机推荐
- c#catch循环内捕获到异常继续循环
一,如果我们将异常而不影响循环,如下代码: using System; using System.Collections.Generic; using System.Linq; using Syste ...
- BUUCTF--reverse2
测试文件:https://buuoj.cn/files/ef0881fc76e5bcd756b554874ef99bec/e8722e94-93d7-45d5-aa06-a7aa26ce01a1.ra ...
- 20180105-Python中dict的使用方法
字典是Python中常用的内置数据类型之一. 字典是无序的对象集合,只能通过key-value的方式存取数据,字典是一种映射类型,其次key的必须是可hash的不可变类型.字典中的key必须唯一. 1 ...
- SIP UserAgent (B2BUA client)——libosip2 libeXosip2
1. libosip2 libeXosip2 http://www.antisip.com/download/exosip2/ Features:--------eXosip2 has support ...
- read - 在文件描述符上执行读操作
概述#include <unistd.h> ssize_t read(int fd, void *buf, size_t count); 描述read() 从文件描述符 fd 中读取 co ...
- C#基础知识之类和结构
虽然项目中一直在使用类.结构体等类型,仔细琢磨,还真无法系统的说出个所以然.记录一下类.结构体.类和结构体区别 一.类 对于类,大家都特别熟悉.简单的介绍一下类的结构,然后记录一下Class需要注意的 ...
- sd卡无法启动及zc706更改主频后可以进入uboot无法启动kernel的坑
好长的标题 +_+ 1.sd卡无法启动 起因:kernel底下通过dd测试速度,擦写了sd卡,再启动时发现无法启动 于是重新格式化,再将BOOT.bin 相关dtb u-rootfs zImage和u ...
- 罗技K380使用手册
Ipad最佳伴侣|码字神器|罗技K380|附使用指南 ———— 为了方便平时在家处理工作➕写小红书笔记,年初买了个Ipad2018 我以前买过一个罗技的K480,因为太重了不方便携带,于是又入了K38 ...
- shell中的双引号和单引号
参考链接:http://bbs.chinaunix.net/thread-2076396-1-1.html " "(双引号)与 ' '(单引号)的区别 你在shell prompt ...
- ubuntu软件源变更阿里源和arm板子变更国内源
使用 lsb_release -c 命令,看看当前版本号,替换一下“bionic”字符 1.更改 /etc/apt/sources.list,更改之前先备份一下 deb http://mirrors. ...