这是什么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>
随机推荐
- Iplimage versus Mat
我们可能经常面临这样的困惑,Iplimage和Mat这两种数据结构,我们应该用哪一种数据结构. Iplimage一开始就存在opencv库之中,他来源于Intel的另外一个函数库Intel Image ...
- linux篇之Nginx web服务器简单部署
一.安装部署nginx 1. 部署前先对nginx介绍下别嫌BB: 如果你听说或使用过Apache软件,那么很快就会熟悉Nginx软件,与Apache软件类似, Nginx(“engine x”)是一 ...
- How To Find Out Attachments By File Type In Outlook?
ext: (extension extension) Take the attachments of zip files and of txt files for example, just ente ...
- ubuntu 开启ftp服务
一. 检查是否已安装 vsftpd vsftpd -v 二. 安装 vsftpd apt-get install vsftpd 三. 检查是否已安装好 vsftpd vsftpd -v system ...
- Redis Redis-Cell
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11632679.html 漏斗限流 漏斗限流是最常用的限流方法之一,另一个是令牌桶(比如:Guava R ...
- 【leetcode】878. Nth Magical Number
题目如下: 解题思路:本题求的是第N个Magical Number,我们可以很轻松的知道这个数的取值范围 [min(A,B), N*max(A,B)].对于知道上下界求具体数字的题目,可以考虑用二分查 ...
- 【转】从phpMyAdmin批量导入Excel内容到MySQL(亲测非常简洁有效)
今天做项目遇到需要用phpMyAdmin批量导入Excel内容到MySQL数据库.分析了我的踏坑经历并且总结一最便捷的一套导入数据的方法,非常实用简洁: 1.修改Excel表的数据,使得Excel中的 ...
- 每天一个linux命令：head(15)
head head命令用于显示文件的开头的内容.在默认情况下,head命令显示文件的头10行内容. 格式 head [参数] [文件] 参数选项 参数 备注 -q 不显示文件名的头信息 -v 总是 ...
- PHPSTORM破解版激活方式方法
方法一. 通过Licence Server 激活PHPStorm(快速) 方法原理是通过搭建服务器激活,不过网上有许多搭建好的. http://idea.goxz.gq http://v2mc.net ...
- window系统命令cmd有哪些？
CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统版本)chcp 修改默认字符集chcp 936默认中文chcp 650011. appwiz.c ...