表格一些基本操作_var ohead = othis.element.thead;-CSDN博客

	<!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';
}
}
}
}