Jquery 选中表格一列并对表格排序

最新推荐文章于 2021-08-06 06:04:35 发布

weixin_34144848

最新推荐文章于 2021-08-06 06:04:35 发布

阅读量159

点赞数

文章标签： javascript 前端 java ViewUI

原文链接：http://www.cnblogs.com/tschengbin/archive/2012/12/15/2818900.html

版权

在前端对表格排序的Jquery插件有很多，功能也很强大，比如说Jquery Data Tables对表格的处理就相当强大，可对表格进行排序，搜索，分页等操作，不过没有仔细研究过其实现原理。

为了更好的理解在前端对表格进行排序的原理，也为了进一步的学习Jquery，所以决定用Jquery来实现一个对表格进行排序的小功能。

该实现的主要思想是：获取鼠标点击的表头单元格的列号，遍历数据行，获取每个<tr>中的html，同时获取每个<tr>标签下对应获取到的列号的<td>标签中的内容，并取得<th>标签的type属性值，将获取<tr>的html、<td>的内容和<th>的type属性值拼接成字符串添加到数组array中，然后将表格<tr>中的html全部置空，根据type属性值的不同采用不同的方法对<td>的内容进行比较，根据比较结果对数组array进行排序，然后将排序后的数组元素重新赋值给已经置空的<tr>。如果已经对该列排序过了，则直接对数组进行倒置。提供数值、字符串以及IP地址三种类型的排序规则。字符串类型排序规则采用javascript的localeCompare方法，该方法支持汉字字符串的排序，遗憾的是该方法不兼容谷歌浏览器。所以在谷歌浏览器上汉字字符串的排序结果会不正确。

HTML代码清单：

View Code

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 <html>
  3  <head>
  4   <title> 表格排序 </title>
  5   <meta name="Generator" content="EditPlus">
  6   <meta name="Author" content="tschengbin">
  7   <meta name="Keywords" content="jquery tableSort">
  8   <meta name="Description" content="">
  9   <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
 10   <script type="text/javascript" src="tableSort.js"></script>
 11   <style type="text/css">
 12     div{
 13         width: 1024px;
 14         margin: 0 auto;/*div相对屏幕左右居中*/
 15     }
 16     table{
 17         border: solid 1px #666;
 18         border-collapse: collapse;
 19         width: 100%;
 20         cursor: default;
 21     }
 22     tr{
 23         border: solid 1px #666;
 24         height: 30px;
 25     }
 26     table thead tr{
 27         background-color: #ccc;
 28     }
 29     td{
 30         border: solid 1px #666;
 31     }
 32     th{
 33         border: solid 1px #666;
 34         text-align: center;
 35         cursor: pointer;
 36     }
 37     .sequence{
 38         text-align: center;
 39     }
 40     .hover{
 41         background-color: #3399FF;
 42     }
 43   </style>
 44  </head>
 45 
 46  <body>
 47     <div>
 48         <table id="tableSort">
 49             <thead>
 50                 <tr>
 51                     <th type="number">序号</th>
 52                     <th type="string">书名</th>
 53                     <th type="number">价格（元）</th>
 54                     <th type="string">出版时间</th>
 55                     <th type="number">印刷量（册）</th>
 56                     <th type="ip">IP</th>
 57                 </tr>
 58             </thead>
 59             <tbody>
 60                 <tr class="hover">
 61                     <td class="sequence">1</td>
 62                     <td>狼图腾</td>
 63                     <td>29.80</td>
 64                     <td>2009-10</td>
 65                     <td>50000</td>
 66                     <td>192.168.1.125</td>
 67                 </tr>
 68                 <tr>
 69                     <td class="sequence">2</td>
 70                     <td>孝心不能等待</td>
 71                     <td>29.80</td>
 72                     <td>2009-09</td>
 73                     <td>800</td>
 74                     <td>192.68.1.125</td>
 75                 </tr>
 76                 <tr>
 77                     <td class="sequence">3</td>
 78                     <td>藏地密码2</td>
 79                     <td>28.00</td>
 80                     <td>2008-10</td>
 81                     <td></td>
 82                     <td>192.102.0.12</td>
 83                 </tr>
 84                 <tr>
 85                     <td class="sequence">4</td>
 86                     <td>藏地密码1</td>
 87                     <td>24.80</td>
 88                     <td>2008-10</td>
 89                     <td></td>
 90                     <td>215.34.126.10</td>
 91                 </tr>
 92                 <tr>
 93                     <td class="sequence">5</td>
 94                     <td>设计模式之禅</td>
 95                     <td>69.00</td>
 96                     <td>2011-12</td>
 97                     <td></td>
 98                     <td>192.168.1.5</td>
 99                 </tr>
100                 <tr>
101                     <td class="sequence">6</td>
102                     <td>轻量级 Java EE 企业应用实战</td>
103                     <td>99.00</td>
104                     <td>2012-04</td>
105                     <td>5000</td>
106                     <td>192.358.1.125</td>
107                 </tr>
108                 <tr>
109                     <td class="sequence">7</td>
110                     <td>Java 开发实战经典</td>
111                     <td>79.80</td>
112                     <td>2012-01</td>
113                     <td>2000</td>
114                     <td>192.168.1.25</td>
115                 </tr>
116                 <tr>
117                     <td class="sequence" onclick="sortArray()">8</td>
118                     <td>Java Web 开发实战经典</td>
119                     <td>69.80</td>
120                     <td>2011-11</td>
121                     <td>2500</td>
122                     <td>215.168.54.125</td>
123                 </tr>
124             </tbody>
125         </table>
126     </div>
127  </body>
128 </html>

tableSort.js代码清单：

View Code

 1 $(document).ready(function(){
 2     var tableObject = $('#tableSort');//获取id为tableSort的table对象
 3     var tbHead = tableObject.children('thead');//获取table对象下的thead
 4     var tbHeadTh = tbHead.find('tr th');//获取thead下的tr下的th
 5     var tbBody = tableObject.children('tbody');//获取table对象下的tbody
 6     var tbBodyTr = tbBody.find('tr');//获取tbody下的tr
 7 
 8     var sortIndex = -1;
 9 
10     tbHeadTh.each(function() {//遍历thead的tr下的th
11         var thisIndex = tbHeadTh.index($(this));//获取th所在的列号
12 
13         $(this).mouseover(function(){
14             tbBodyTr.each(function(){//编列tbody下的tr
15                 var tds = $(this).find("td");//获取列号为参数index的td对象集合
16                 $(tds[thisIndex]).addClass("hover");
17             });
18         }).mouseout(function(){
19             tbBodyTr.each(function(){
20                 var tds = $(this).find("td");
21                 $(tds[thisIndex]).removeClass("hover");
22             });
23         });
24 
25         $(this).click(function() {
26             var dataType = $(this).attr("type");
27             checkColumnValue(thisIndex, dataType);
28         });
29     });
30     
31     $("tbody tr").removeClass();//先移除tbody下tr的所有css类
32 
33     $("tbody tr").mouseover(function(){
34         $(this).addClass("hover");
35     }).mouseout(function(){
36         $(this).removeClass("hover");
37     });
38 
39     //对表格排序
40     function checkColumnValue(index, type) {
41         var trsValue = new Array();
42 
43         tbBodyTr.each(function() {
44             var tds = $(this).find('td');
45             trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html());
46             $(this).html("");
47         });
48 
49         var len = trsValue.length;
50         
51         if(index == sortIndex){
52             trsValue.reverse();
53         } else {
54             for(var i = 0; i < len; i++){
55                 type = trsValue[i].split(".separator")[0];
56                 for(var j = i + 1; j < len; j++){
57                     value1 = trsValue[i].split(".separator")[1];
58                     value2 = trsValue[j].split(".separator")[1];
59                     if(type == "number"){
60                         value1 = value1 == "" ? 0 : value1;
61                         value2 = value2 == "" ? 0 : value2;
62                         if(parseFloat(value1) > parseFloat(value2)){
63                             var temp = trsValue[j];
64                             trsValue[j] = trsValue[i];
65                             trsValue[i] = temp;
66                         }
67                     } else if(type == "ip"){
68                         if(ip2int(value1) > ip2int(value2)){
69                             var temp = trsValue[j];
70                             trsValue[j] = trsValue[i];
71                             trsValue[i] = temp;
72                         }
73                     } else {
74                         if (value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器
75                             var temp = trsValue[j];
76                             trsValue[j] = trsValue[i];
77                             trsValue[i] = temp;
78                         }
79                     }
80                 }
81             }
82         }
83 
84         for(var i = 0; i < len; i++){
85             $("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]);
86         }
87 
88         sortIndex = index;
89     }
90 
91     //IP转成整型
92     function ip2int(ip){
93         var num = 0;
94         ip = ip.split(".");
95         num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]);
96         return num;
97     }
98 
99 })