点击表头，实现表格内容的规则排序
Posted Cultivate
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击表头，实现表格内容的规则排序相关的知识，希望对你有一定的参考价值。
描述：实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。
如图所示：
| 姓名 | 力量 | 敏捷 | 智力 |
| 赵 | 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 }
以上是关于点击表头，实现表格内容的规则排序的主要内容，如果未能解决你的问题，请参考以下文章
非常强大的table根据表头排序,点击表头名称,对其内容排序