首页 > 代码库 > 点击表头，实现表格内容的规则排序

点击表头，实现表格内容的规则排序

2024-08-15 08:53:03   219人阅读

描述：实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。

     如图所示：

 姓名 力量 敏捷 智力
 赵 17 34 13
 钱 15 22 16
 孙 19 15 20
 李 23 15 15

接下来，首先绘制该表格，

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5     <title>表格排序</title> 6 </head> 7 <style type="text/css"> 8     table{ 9         width: 500px;10         height: 200px;11         position: relative;12         border-width: 0px 0px 1px 1px;13         border-style: solid;14     }  15     tr{16         height: 40px;17     }18     td,th{19         width: 25%;20          border-width: 1px 1px 0 0;21        border-style: solid;22         padding: 0;23         margin: 0;24     }25 </style>26 <body>27 <table id="table" cellpadding="1" cellspacing="1">//cellpadding 属性规定单元边沿与单元内容之间的空间，以像素计;     
                               //请勿将该属性与cellspacing属性相混淆，cellspacing 属性规定的是单元之间的空间。28     <thead>29         <tr bgcolor="grey">30             <th>姓名</th>31             <th onclick="sortTable(1)">力量</th>32             <th onclick="sortTable(2)">敏捷</th>33             <th onclick="sortTable(3)">智力</th>34         </tr>35     </thead>36     <tbody>37         <tr>38             <th>赵</th>39             <td>17</td>40             <td>24</td>41             <td>13</td>42         </tr>43         <tr>44             <th>钱</th>45             <td>15</td>46             <td>22</td>47             <td>16</td>48         </tr>49         <tr>50             <th>孙</th>51             <td>19</td>52             <td>35</td>53             <td>20</td>54         </tr>55         <tr>56             <th>李</th>57             <td>23</td>58             <td>15</td>59             <td>14</td>60         </tr>61     </tbody>62 </table>63 <script src="ceshi.js" type="text/javascript"></script>64 </body>65 </html>

接下来，是对应的js实现：

 1 var isSort = [false,false,false];//标记是否排过序 2     function sortTable (colNo) { 3         var rowsArray = [];//表格中所有行的集合 4         var colsArray = [];//表格中所有列的集合 5         var tbody = document.getElementsByTagName(‘tbody‘)[0]; 6         //初始化行和列 7         for (var i = 0; i < tbody.rows.length; i++) { 8             rowsArray[i] = tbody.rows[i]; 9             colsArray[i] = rowsArray[i].cells[colNo];10         }11          12         //排序13         //console.log(isSort[colNo])     14         if (!isSort[colNo]) {//isSort为false时，降序排列15             isSort[colNo] = true;16             colsArray.sort(function (a,b) {17                 return b.innerHTML - a.innerHTML;//a、b表示数组的任意两个元素，如果return>0,则b前a后，反之则a前b后
                 //例如：当点击第四列时，首先a=13，b=16，运算结果为b前a后；接下来a=13，b=20，因为b-a>0,之后b前a后，然后a=16，b=20，运算结果是b前a后，然后a=13，b=14，b-a>0,
                 //b前a后，最后再比较a=16，b=14，此时b-a<0,不需要交换次序，排序停止
                  //此处是 b.innerHTML - a.innerHTML，得到的结果是降序排列；
                  //如果是 a.innerHTML - b.innerHTML，得到的结果是升序排列；               
18             });19         }else{20             //此时已经降序排序过了，对数组逆序即可21             colsArray.reverse();22             isSort[colNo] = false;23         }24         //当某一列排序后将表格所有元素的值放到新的数组中25         var rowsTempArray = [];26         for (var i = 0; i < rowsArray.length; i++) {27             var colsTempArray = [];28             for (var j = 0; j < colsArray.length; j++) {29                 //将i行的所有列的内容保存在colsTempArray[j]中30                 colsTempArray[j] = colsArray[i].parentNode.cells[j].innerHTML;//colsArray[i].parentNode指的是当前行
                      31             }32             //将一行内容保存到rowsTempArray。33             rowsTempArray[i] = colsTempArray;34         }35         //重绘页面36         for (var i = 0; i < rowsArray.length; i++) {37             for (var j = 0; j < colsArray.length; j++) {38                 rowsArray[i].cells[j].innerHTML = rowsTempArray[i][j]; 39             }40         }41     }

 

点击表头，实现表格内容的规则排序


联系
我们