|
無更新資料排序
將下列程式碼複製至<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> |