标签：his type sort text classname turn meta body sub
1 题目：如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。 2 姓名 力量 敏捷 智力 3 德鲁伊王 17 24 13 4 月之骑士 15 22 16 5 众神之王 19 15 20 6 流浪剑客 23 15 14 7 基本思路： 8 点击将各列数值存入数组第一次点击?(className=="as"?)升序排序(className="desc")按新排列的数组的顺序，将各列赋予新值降序排序(className="as")yesno 9 完整代码： 10 11 <!DOCTYPE HTML> 12 <html> 13 <head> 14 <meta charset="utf-8"> 15 </head> 16 <body> 17 <table> 18 <tr> 19 <th>姓名</th> 20 <th id="th1" onclick="SortTable(this)" class="as">力量</th> 21 <th id="th2" onclick="SortTable(this)" class="as">敏捷</th> 22 <th id="th3" onclick="SortTable(this)" class="as">智力</th> 23 </tr> 24 <tr> 25 <td name="td0">德鲁伊</td> 26 <td name="td1">17</td> 27 <td name="td2">24</td> 28 <td name="td3">13</td> 29 </tr> 30 <tr> 31 <td name="td0">月之骑士</td> 32 <td name="td1">15</td> 33 <td name="td2">22</td> 34 <td name="td3">16</td> 35 </tr> 36 <tr> 37 <td name="td0">众神之王</td> 38 <td name="td1">19</td> 39 <td name="td2">15</td> 40 <td name="td3">20</td> 41 </tr> 42 <tr> 43 <td name="td0">流浪剑客</td> 44 <td name="td1">23</td> 45 <td name="td2">15</td> 46 <td name="td3">14</td> 47 </tr> 48 </table> 49 </body> 50 </html> 51 <script type="text/javascript"> 52 var tag=1; 53 function sortNumberAS(a, b) 54 { 55 return a - b 56 } 57 function sortNumberDesc(a, b) 58 { 59 return b-a 60 } 61 62 function SortTable(obj){ 63 var td0s=document.getElementsByName("td0"); 64 var td1s=document.getElementsByName("td1"); 65 var td2s=document.getElementsByName("td2"); 66 var td3s=document.getElementsByName("td3"); 67 var tdArray0=[]; 68 var tdArray1=[]; 69 var tdArray2=[]; 70 var tdArray3=[]; 71 for(var i=0;i<td0s.length;i++){ 72 tdArray0.push(td0s[i].innerHTML); 73 } 74 for(var i=0;i<td1s.length;i++){ 75 tdArray1.push(parseInt(td1s[i].innerHTML)); 76 } 77 for(var i=0;i<td2s.length;i++){ 78 tdArray2.push(parseInt(td2s[i].innerHTML)); 79 } 80 for(var i=0;i<td3s.length;i++){ 81 tdArray3.push(parseInt(td3s[i].innerHTML)); 82 } 83 var tds=document.getElementsByName("td"+obj.id.substr(2,1)); 84 var columnArray=[]; 85 for(var i=0;i<tds.length;i++){ 86 columnArray.push(parseInt(tds[i].innerHTML)); 87 } 88 var orginArray=[]; 89 for(var i=0;i<columnArray.length;i++){ 90 orginArray.push(columnArray[i]); 91 } 92 if(obj.className=="as"){ 93 columnArray.sort(sortNumberAS); //排序后的新值 94 obj.className="desc"; 95 }else{ 96 columnArray.sort(sortNumberDesc); //排序后的新值 97 obj.className="as"; 98 } 99 100 101 for(var i=0;i<columnArray.length;i++){ 102 for(var j=0;j<orginArray.length;j++){ 103 if(orginArray[j]==columnArray[i]){ 104 document.getElementsByName("td0")[i].innerHTML=tdArray0[j]; 105 document.getElementsByName("td1")[i].innerHTML=tdArray1[j]; 106 document.getElementsByName("td2")[i].innerHTML=tdArray2[j]; 107 document.getElementsByName("td3")[i].innerHTML=tdArray3[j]; 108 orginArray[j]=null; 109 break; 110 } 111 } 112 } 113 } 114 </script>
标签：his type sort text classname turn meta body sub
原文地址：http://www.cnblogs.com/stsinghua/p/6418652.html
