这是什么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#中out和ref的区别
来源:https://www.cnblogs.com/sunliyuan/p/5999045.html 首先,俩者都是按地址传递的,使用后都将改变原来参数的数值. 其次,ref可以把参数的数值传递进函 ...
- docker ssh连接不上
docker ssh连接报下面的错 Last login: Thu Apr 13 09:17:23 2017 from localhost Connection to 127.0.0.1 closed ...
- axios 利用new FileReader() 下载文件获取返回的错误信息
this.axios({ method: "post", url: url, data: data, ...
- node的fs模块使用————node
node的fs模块使用----node fs模块是调用文件的模块. var fs=require('fs'); //引用模块. //查看文件信息 fs.stat('index.txt',functio ...
- Django 高级配置
目录 Django 信号 信号系统三要素: 信号的分类: Django 内置信号: 具体 Django 信号内容 定义信号 发送信号 接收信号 信号接收器 防止重复信号 Django 内置信号操作步骤 ...
- Codeforces Round #393 (Div. 2) - A
题目链接:http://codeforces.com/contest/760/problem/A 题意:给定一个2017年的月份和该月的第一天的星期,问该月份的日历表中需要多少列.行有7列表示星期一~ ...
- web安全—tomcat禁用WebDAV或者禁止不需要的 HTTP 方法
现在主流的WEB服务器一般都支持WebDAV,使用WebDAV的方便性,呵呵,就不用多说了吧,用过VS.NET开发ASP.Net应用的朋友就应该 知道,新建/修改WEB项目,其实就是通过WebDAV+ ...
- ubuntu 安装php xdebug
windows 安装xdebug https://www.jetbrains.com/help/phpstorm/configuring-xdebug.html 一.下载 下载与PHP版兼容的Xdeb ...
- springBoot相关（一）
2.0新特性: 编程语言: Java8+.Kotlin 底层框架:Spring Framwork 5.0.x 全新特性: web Flux web Flux: 函数编程:java 8 Lambda 响 ...
- 【leetcode】891. Sum of Subsequence Widths
题目如下: 解题思路:题目定义的子序列宽度是最大值和最小值的差,因此可以忽略中间值.首先对数组排序,对于数组中任意一个元素,都可以成为子序列中的最大值和最小值而存在.例如数组[1,2,3,4,5,6] ...