首页 > 代码库 > HTML中实现Table表头点击升序/降序排序

HTML中实现Table表头点击升序/降序排序

2024-09-05 02:48:23   217人阅读

  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>

 

HTML中实现Table表头点击升序/降序排序


联系
我们