學號5 姓名5 國文5 英文5 數學5 體育5 音樂5

無更新資料排序

將下列程式碼複製至<head>程式碼</head>區內。

<table border=0 cellpadding=0 cellspacing=0><tr><td bgcolor=#000000>
<table border=0 cellpadding=0 cellspacing=1>
<tr bgcolor=#cccccc>
<td id="col0" onclick="sortdata(0)" class=head><span class=topic>學號</span><span id="arr0" class=sort>5</span></td>
<td id="col1" onclick="sortdata(1)" class=head><span class=topic>姓名</span><span id="arr1" class=sort>5</span></td>
<td id="col2" onclick="sortdata(2)" class=head><span class=topic>國文</span><span id="arr2" class=sort>5</span></td>
<td id="col3" onclick="sortdata(3)" class=head><span class=topic>英文</span><span id="arr3" class=sort>5</span></td>
<td id="col4" onclick="sortdata(4)" class=head><span class=topic>數學</span><span id="arr4" class=sort>5</span></td>
<td id="col5" onclick="sortdata(5)" class=head><span class=topic>體育</span><span id="arr5" class=sort>5</span></td>
<td id="col6" onclick="sortdata(6)" class=head><span class=topic>音樂</span><span id="arr6" class=sort>5</span></td>
</tr><tr bgcolor=#ffffff>
<td colspan=7><div id=DataTable></div></td>
</tr>
</table>
</td></tr></table>

將下列程式碼複製至<body 程式碼>的標籤之中。

onload="sortdata(0)"

將下列程式碼複製至<body>程式碼</body>之間。

<style>
body,td {font:12px 細明體;color:#000;margin:0px}
.head {width:48px;border:1px solid;border-color:#fff #aaa #aaa #fff;padding:4 0 2 6;background:#ccc;cursor:hand}
.data {width:50px;border-top:1px solid #ddd;border-right:1px solid #ddd;padding:4 0 2 6;cursor:default}
.topic {width:35px;letter-spacing:6px}
.sort {font:11px Marlett;line-height:12px}
</style>
<script>
var temp_0=new Array
var temp_1=new Array
var sort_r=false//預設值設成正向排序
var sort_p=1000//無意義，大於陣列數即可
var sort_w="5"
function sortdata(s){
temp_0[0]="8920101 ,張三豐 ,55 ,78 ,70 ,80 ,30"
temp_0[1]="8920102 ,謝遜 ,64 ,55 ,84 ,75 ,75"
temp_0[2]="8920103 ,宋遠橋 ,48 ,69 ,60 ,60 ,70"
temp_0[3]="8920104 ,楊不悔 ,73 ,60 ,55 ,65 ,45"
temp_0[4]="8920105 ,周芷若 ,60 ,83 ,32 ,80 ,80"
temp_0[5]="8920106 ,張無忌 ,92 ,60 ,50 ,70 ,60"
temp_0[6]="8920107 ,滅絕師太 ,20 ,70 ,65 ,65 ,75"

var DataTemp=""

for(i=0;i<temp_0.length;i++){
temp_0[i]=temp_0[i].split(",")//轉換成二維陣列
temp_1[i]=new Array
for(j=0;j<temp_0[i].length;j++){
temp_0[i][j]=temp_0[i][j].replace(/^[\s]+/g,"").replace(/[\s]+$/g,"")//去除頭尾的空白字元
temp_1[i][j]=temp_0[i][j]//將 temp_0 的資料置入 temp_1
}
//將排序項目與第一個陣列位置互換
temp_1[i][0]=temp_0[i][s]
temp_1[i][s]=temp_0[i][0]
}

temp_1.sort()//陣列排序
if(sort_p==s){
sort_r=(sort_r==false)?true:false
sort_w=(sort_w=="5")?"6":"5"//更換箭頭符號
}

if(sort_r){temp_1.reverse()}//陣列反向排序
sort_p=s
for(i=0;i<j;i++){
eval('arr'+i).style.color="#aaa"
eval('arr'+i).innerHTML=sort_w
}
eval('arr'+s).style.color="#000"

for(i=0;i<temp_1.length;i++){
for(j=0;j<temp_1[i].length;j++){
temp_0[i][j]=temp_1[i][j]//將temp_1的資料置入temp_0
}
//將排序項目換回原來的陣列位置
temp_0[i][0]=temp_1[i][s]
temp_0[i][s]=temp_1[i][0]
}
DataTemp+="<table border=0 cellpadding=0 cellspacing=0>"
for(i=0;i<temp_0.length;i++){
DataTemp+="<tr bgcolor=#ffffff onmouseover=\"this.style.background='#eee';this.style.color='#06c'\" onmouseout=\"this.style.background='#fff';this.style.color='#000'\">"
for(j=0;j<temp_0[i].length;j++){
DataTemp+=("<td class=data>"+temp_0[i][j]+"</td>")
}
DataTemp+="</tr>"
}
DataTemp+="</table>"
DataTable.innerHTML=DataTemp
}
</script>