-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathIFE test 16.html
134 lines (134 loc) · 4.4 KB
/
IFE test 16.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!--
参考下方设计图，实现一个支持列排序的表格组件
提供生成表格的接口，表格中的数据，表格样式尽量低耦合
可以配置对哪些列支持排序功能，并在表头进行排序按钮的显示，图中的样式为示意参考，可自行设定样式及交互方式
提供点击排序按钮后的响应接口，并提供默认的排序方法，当提供的接口没有具体实现时，按默认的排序方法进行排序操作，并更新表格中的数据显示。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>yaoyaoseven</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
table{
width:400px;
text-align:center;
float:right;
margin-right:300px;
}
form{
width:400px;
margin-left:300px;
margin-top:100px;
}
</style>
</head>
<body>
<table id="table" border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>总分</th>
</tr>
</table>
<form>
<p>请输入数据</p>
<p>姓名： <input type="text" id="name" name="name"></input></p>
<p>语文： <input type="text" id="ch" name="chinese"></input></p>
<p>数学： <input type="text" id="math" name="math"></input></p>
<p>英语： <input type="text" id="en" name="english"></input></p>
<input type="button" id="getinput" value="提交"></input>
<input type="button" id="paixu1" value="语文排序"></input>
<input type="button" id="paixu2" value="数学排序"></input>
<input type="button" id="paixu3" value="英语排序"></input>
<input type="button" id="paixu4" value="总分排序"></input>
</form>
<script>
var newlist=new Array();//储存成绩
document.getElementById("getinput").onclick=function(){
var ch=document.getElementById("ch").value;
var name=document.getElementById("name").value;
var math=document.getElementById("math").value;
var en=document.getElementById("en").value;
var table=document.getElementById("table");
var total=parseInt(ch)+parseInt(math)+parseInt(en);
var newtr=document.createElement("tr");
table.appendChild(newtr);
var newch=document.createElement("td");
var newname=document.createElement("td");
var newmath=document.createElement("td");
var newen=document.createElement("td");
var newtotal=document.createElement("td");
newtr.appendChild(newname);
newtr.appendChild(newch);
newtr.appendChild(newmath);
newtr.appendChild(newen);
newtr.appendChild(newtotal);
newch.innerHTML=ch;
newname.innerHTML=name;
newmath.innerHTML=math;
newen.innerHTML=en;
newtotal.innerHTML=total;
}//读取提交的成绩做成表格
document.getElementById("paixu1").onclick=function(){
var nodelist=document.getElementById("table");
for(var i=1;i<nodelist.children.length;i++){
newlist[i-1]=nodelist.children[i].children[1].innerHTML;
}
newlist=sort(newlist);
for(var i=1;i<nodelist.children.length;i++){
nodelist.children[i].children[1].innerHTML=newlist[i-1];
}
}//读取提交的语文成绩并排序
document.getElementById("paixu2").onclick=function(){
var nodelist=document.getElementById("table");
for(var i=1;i<nodelist.children.length;i++){
newlist[i-1]=nodelist.children[i].children[2].innerHTML;
}
newlist=sort(newlist);
for(var i=1;i<nodelist.children.length;i++){
nodelist.children[i].children[2].innerHTML=newlist[i-1];
}
}//读取提交的数学成绩并排序
document.getElementById("paixu3").onclick=function(){
var nodelist=document.getElementById("table");
for(var i=1;i<nodelist.children.length;i++){
newlist[i-1]=nodelist.children[i].children[3].innerHTML;
}
newlist=sort(newlist);
for(var i=1;i<nodelist.children.length;i++){
nodelist.children[i].children[3].innerHTML=newlist[i-1];
}
}//读取提交的英语成绩并排序
document.getElementById("paixu4").onclick=function(){
var nodelist=document.getElementById("table");
for(var i=1;i<nodelist.children.length;i++){
newlist[i-1]=nodelist.children[i].children[4].innerHTML;
}
newlist=sort(newlist);
for(var i=1;i<nodelist.children.length;i++){
nodelist.children[i].children[4].innerHTML=newlist[i-1];
}
}//读取提交的总分并排序
function sort(data){
var a;
for(var i=0;i<data.length;i++){
for(var j=0;j<data.length;j++){
if(data[i]>data[j]){
a=data[i];
data[i]=data[j];
data[j]=a;
}
}
}
return data;
}//排序函数
</script>
</body>
</html>