这是什么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>
随机推荐
- JS高级 —— 普通函数、构造函数、对象方法的调用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- elasticsearch 基础 —— Update By Query API
Update By Query API 最简单的用法是_update_by_query在不更改源的情况下对索引中的每个文档执行更新.这对于获取新属性或其他一些在线映射更改很有用 .这是API: POS ...
- setter getter 方法
MRC下setter.getter方法写法.重写dealloc方法 @interface People : NSObject @property (nonatomic,strong) NSString ...
- [置顶]unity常用开发套件
维京人骨骼动画制作(Unity 2D Animation资源包使用指南) 维京人骨骼动画制作2(Unity 2D IK资源包使用指南) -------------------------------- ...
- GC(垃圾回收器)中的算法
GC的两种判定方法 (1) 引用计数法 给对象添加一个引用计数器,每当引用一次+1,每次失效时-1,当计数器为0时,表示对象就是不可能再被使用的. (2) 可达性分析算法 将“GC Roots”对象作 ...
- Java二级上机训练
NCRE上机训练一 import javax.swing.JOptionPane; /** * 并完成两个整数的输入,计算乘积,最后按确定键退出程序. */ public class Java_1 { ...
- java基础复习（二）
一. 基本语法 如果一个源文件中什么内容都没有,编译会不会生成 字节码文件?不会 如果一个类中没有主方法(如下图),编译运行会怎么样?编译可以通过,但运行报错 : 没有主方法 主方法 : 是一个特殊的 ...
- Ubuntu新建用户组
新建用户组 sudo addgroup groupname 把现有用户加入新建的用户组 sudo adduser username groupname
- 【leetcode】897. Increasing Order Search Tree
题目如下: 解题思路:我的方法是先用递归的方法找出最左边的节点,接下来再对树做一次递归中序遍历,找到最左边节点后将其设为root,其余节点依次插入即可. 代码如下: # Definition for ...
- make编写教程（一）
1. make规则 如果工程没有被编译过,则所有的c文件都要编译和链接 如果工程的某几个c文件被修改,那么只编译被修改的文件,并链接目标程序 如果工程的头文件被修改,需要编译引用了此头文件的c文件,并 ...