这是什么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 IntersectionObserver api
API const options = { root: null, threshold: [0, 0.5, 1], rootMargin: '30px 100px 20px' } var io = n ...
- 【记录】ajax 设置请求header的Content-Type 为 application/json;charset=utf8
具体案例如下 $.ajax({ url: context.state.IpccSendIm, method: 'POST', data: JSON.stringify(val), headers:{' ...
- ssh-agent - 认证代理
总览 (SYNOPSIS) ssh-agent [-a bind_address ] [-c | -s ] [-t life ] [-d ] [command [args ... ] ] ssh-ag ...
- [数论]原根与指标，BSGS
刚学了这方面的知识,总结一下.推荐学习数论方面的知识还是看书学习,蒟蒻看的是<初等数论>学的. 这里也推荐几个总结性质的博客,学习大佬的代码和习题. 原根:https://blog.csd ...
- Vue-列表渲染 非变异方法
变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组.相比之下,也有非变异 (non-mutating method) 方法,例如:filter(), concat( ...
- Vue路由监听
一.问题描述 描述:页面1showowner.vue跳转到页面2showuser.vue 需求:页面1的多个结点对应于一个页面2文件[页面2未展示] 问题:并不是页面一的一个结点对应一个页面二文件 处 ...
- python在mapreduce运行Wordcount程序
首先脚本文件: mapper.py: #!/usr/bin/env python import sys for line in sys.stdin: line = line.strip() words ...
- cornerNet部分学习内容记录
cornerNet来源灵感是基于多人姿态估计的从下往上思想,预测角的热图,根据嵌入式向量对角进行分组,其主干网络也来自于姿态估计的环面网络. cornerNet的总体框架结构图如下: CornerN ...
- 什么是ppa
What is ppa? PPAs are for non standard software/updates. They are generally used by people who want ...
- python-字符、字符串、函数处理
1.列表元祖字典集合 列表 list = ["a", "b", "c", "d"] 元祖 tup = (1, 2, 3, ...