描述：实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。
如图所示：
| 姓名 | 力量 | 敏捷 | 智力 |
| 赵 | 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 }
时间： 2024-10-18 05:16:57