Jquery 选中表格一列并对表格排序
2013-04-26 21:32
369 查看
在前端对表格排序的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
View Code
排序前
排序后 特别感谢网友“夏の寒风”，在Jquery的相关操作上要是没有“夏の寒风”的帮忙肯定很难完成。对这个效果自己还是很满意的，只是在实现的操作上拼接字符串，截取字符串的过程有些繁琐，不够简单明了，还有待改进。
为了更好的理解在前端对表格进行排序的原理，也为了进一步的学习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 }) 运行结果：排序前
排序后 特别感谢网友“夏の寒风”，在Jquery的相关操作上要是没有“夏の寒风”的帮忙肯定很难完成。对这个效果自己还是很满意的，只是在实现的操作上拼接字符串，截取字符串的过程有些繁琐，不够简单明了，还有待改进。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery 选中表格一列并对表格排序
- [置顶] Jquery 选中表格一列并对表格排序
- Jquery 选中表格一列并对表格排序实现原理
- Jquery 选中表格一列并对表格排序实现原理
- Jquery 选中表格一列并对表格排序
- jquery.sort——表格排序插件
- jquery实现表格本地排序的方法
- 改进jquery.tablesorter.js 支持中文表格排序
- jquery库的一个表格排序插件
- 使用jquery的tablesorter插件进行表格排序
- jQuery插件，实现表格选中状态及鼠标滑过高亮
- jQuery liger ui ligerGrid 打造通用的分页排序查询表格(提供下载)
- jquery实现table表格选中后变颜色
- jQuery表格排序组件-tablesorter
- jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)
- 无刷新对表格的一列排序
- jquery表格排序
- jquery单选框 复选框表格高亮 选中
- 使用jquery表格排序
- jQuery 表格排序插件