<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>百度面试——成绩排名</title> | |
<style> | |
* { | |
margin: 0; | |
padding: 0; | |
} | |
body{ | |
padding: 50px; | |
} | |
table { | |
border-collapse: collapse; | |
margin: 0 auto; | |
margin-top: 50px; | |
} | |
tbody tr { | |
cursor: pointer; | |
} | |
th, | |
td { | |
width: 200px; | |
height: 30px; | |
border: 1px solid #000; | |
} | |
td { | |
text-align: center; | |
} | |
</style> | |
<script src="js.js" type="text/javascript" charset="utf-8"></script> | |
</head> | |
<body> | |
<input type="button" id="btn1" value="语文最高分" /> | |
<input type="button" id="btn2" value="数学最高分" /> | |
<input type="button" id="btn3" value="英语最高分" /> | |
<input type="button" id="btn4" value="语文平均分" /> | |
<input type="button" id="btn5" value="数学平均分" /> | |
<input type="button" id="btn6" value="英语平均分" /> | |
<input type="text" name="" id="btn7" value="" /> | |
<input type="button" id="btn8" value="查询" /> | |
<table id="table"> | |
<thead> | |
<tr> | |
<th>排名</th> | |
<th>姓名</th> | |
<th>语文</th> | |
<th>数学</th> | |
<th>外语</th> | |
<th>总和</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td></td> | |
<td>陈小妞</td> | |
<td>76</td> | |
<td>80</td> | |
<td>87</td> | |
<td></td> | |
</tr> | |
<tr> | |
<td></td> | |
<td>陈莲莲</td> | |
<td>98</td> | |
<td>43</td> | |
<td>78</td> | |
<td></td> | |
</tr> | |
<tr> | |
<td></td> | |
<td>Alien</td> | |
<td>90</td> | |
<td>53</td> | |
<td>86</td> | |
<td></td> | |
</tr> | |
<tr> | |
<td></td> | |
<td>陈晓瑞</td> | |
<td>80</td> | |
<td>43</td> | |
<td>87</td> | |
<td></td> | |
</tr> | |
<tr> | |
<td></td> | |
<td>高健</td> | |
<td>43</td> | |
<td>87</td> | |
<td>98</td> | |
<td></td> | |
</tr> | |
<tr> | |
<td></td> | |
<td>张媛媛</td> | |
<td>60</td> | |
<td>54</td> | |
<td>84</td> | |
<td></td> | |
</tr> | |
<tr> | |
<td></td> | |
<td>郑媛媛</td> | |
<td>34</td> | |
<td>34</td> | |
<td>67</td> | |
<td></td> | |
</tr> | |
<tr> | |
<td></td> | |
<td>秦优</td> | |
<td>54</td> | |
<td>87</td> | |
<td>87</td> | |
<td></td> | |
</tr> | |
<tr> | |
<td></td> | |
<td>陈书贞</td> | |
<td>65</td> | |
<td>87</td> | |
<td>67</td> | |
<td></td> | |
</tr> | |
<tr> | |
<td></td> | |
<td>陈杲</td> | |
<td>98</td> | |
<td>97</td> | |
<td>96</td> | |
<td></td> | |
</tr> | |
</tbody> | |
</table> | |
</body> | |
</html> |
window.οnlοad=function(){
var oTable=document.getElementById('table');
var oBody=oTable.tBodies[0];
var aRows=oBody.rows;
var oHead=oTable.tHead;
var oRow=oHead.rows[0];
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oBtn3=document.getElementById('btn3');
var oBtn4=document.getElementById('btn4');
var oBtn5=document.getElementById('btn5');
var oBtn6=document.getElementById('btn6');
var oBtn7=document.getElementById('btn7');
var oBtn8=document.getElementById('btn8');
//求总分
for(var i=0;i<aRows.length;i++){
var iRd1=parseInt(aRows[i].cells[2].innerHTML);
var iRd2=parseInt(aRows[i].cells[3].innerHTML);
var iRd3=parseInt(aRows[i].cells[4].innerHTML);
aRows[i].cells[5].innerHTML=iRd1+iRd2+iRd3;
}
//按照语文成绩进行排序
oBtn1.οnclick=function(){
paixu(2);
addid();
oBtn7.value=aRows[0].cells[2].innerHTML;
}
//按照数学成绩进行排序
oBtn2.οnclick=function(){
paixu(3);
addid();
oBtn7.value=aRows[0].cells[3].innerHTML;
}
//按照英语成绩进行排序
oBtn3.οnclick=function(){
paixu(4);
addid();
oBtn7.value=aRows[0].cells[4].innerHTML;
}
//求语文评价分
oBtn4.οnclick=function(){
var num=pingjun(2);
oBtn7.value=num;
}
//求语文评价分
oBtn5.οnclick=function(){
var num=pingjun(3);
oBtn7.value=num;
}
//求语文评价分
oBtn6.οnclick=function(){
var num=pingjun(4);
oBtn7.value=num;
}
//排序
oBtn8.οnclick=function(){
search();
}
function paixu(celnum){
var arr=[];
for(var i=0;i<aRows.length;i++){
arr[i]=aRows[i];//假数组赋给真数组
}
arr.sort(function(a,b){
var n1=parseInt(a.cells[celnum].innerHTML);
var n2=parseInt(b.cells[celnum].innerHTML);
return n2-n1;//升序
});
for(var i=0;i<aRows.length;i++){
oBody.appendChild(arr[i]);
}
}
//添加id
function addid(){
for(var i=0;i<aRows.length;i++){
aRows[i].cells[0].innerHTML=i+1;
}
}
//求评价分
function pingjun(clenum){
var sum=0;
for(var i=0;i<aRows.length;i++){
sum=sum+parseInt(aRows[i].cells[clenum].innerHTML);
}
return sum/aRows.length;
}
//查询功能
function search(){
var oTex=oBtn7.value;
console.log(oTex);
for(var i=0;i<aRows.length;i++){
aRows[i].style.display='none';
if(aRows[i].cells[1].innerHTML == oTex){
aRows[i].style.display='table-row';
}
}
}
}