首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Jquery 选中表格一列并对表格排序实现原理

Posted in Javascript onDecember 15, 2012

在前端对表格排序的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 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title> 表格排序 </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content="tschengbin"> 
<meta name="Keywords" content="jquery tableSort"> 
<meta name="Description" content=""> 
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="tableSort.js"></script> 
<style type="text/css"> 
div{ 
width: 1024px; 
margin: 0 auto;/*div相对屏幕左右居中*/ 
} 
table{ 
border: solid 1px #666; 
border-collapse: collapse; 
width: 100%; 
cursor: default; 
} 
tr{ 
border: solid 1px #666; 
height: 30px; 
} 
table thead tr{ 
background-color: #ccc; 
} 
td{ 
border: solid 1px #666; 
} 
th{ 
border: solid 1px #666; 
text-align: center; 
cursor: pointer; 
} 
.sequence{ 
text-align: center; 
} 
.hover{ 
background-color: #3399FF; 
} 
</style> 
</head> 
<body> 
<div> 
<table id="tableSort"> 
<thead> 
<tr> 
<th type="number">序号</th> 
<th type="string">书名</th> 
<th type="number">价格（元）</th> 
<th type="string">出版时间</th> 
<th type="number">印刷量（册）</th> 
<th type="ip">IP</th> 
</tr> 
</thead> 
<tbody> 
<tr class="hover"> 
<td class="sequence">1</td> 
<td>狼图腾</td> 
<td>29.80</td> 
<td>2009-10</td> 
<td>50000</td> 
<td>192.168.1.125</td> 
</tr> 
<tr> 
<td class="sequence">2</td> 
<td>孝心不能等待</td> 
<td>29.80</td> 
<td>2009-09</td> 
<td>800</td> 
<td>192.68.1.125</td> 
</tr> 
<tr> 
<td class="sequence">3</td> 
<td>藏地密码2</td> 
<td>28.00</td> 
<td>2008-10</td> 
<td></td> 
<td>192.102.0.12</td> 
</tr> 
<tr> 
<td class="sequence">4</td> 
<td>藏地密码1</td> 
<td>24.80</td> 
<td>2008-10</td> 
<td></td> 
<td>215.34.126.10</td> 
</tr> 
<tr> 
<td class="sequence">5</td> 
<td>设计模式之禅</td> 
<td>69.00</td> 
<td>2011-12</td> 
<td></td> 
<td>192.168.1.5</td> 
</tr> 
<tr> 
<td class="sequence">6</td> 
<td>轻量级 Java EE 企业应用实战</td> 
<td>99.00</td> 
<td>2012-04</td> 
<td>5000</td> 
<td>192.358.1.125</td> 
</tr> 
<tr> 
<td class="sequence">7</td> 
<td>Java 开发实战经典</td> 
<td>79.80</td> 
<td>2012-01</td> 
<td>2000</td> 
<td>192.168.1.25</td> 
</tr> 
<tr> 
<td class="sequence" onclick="sortArray()">8</td> 
<td>Java Web 开发实战经典</td> 
<td>69.80</td> 
<td>2011-11</td> 
<td>2500</td> 
<td>215.168.54.125</td> 
</tr> 
</tbody> 
</table> 
</div> 
</body> 
</html>

tableSort.js代码清单： 
View Code 
$(document).ready(function(){ 
var tableObject = $('#tableSort');//获取id为tableSort的table对象 
var tbHead = tableObject.children('thead');//获取table对象下的thead 
var tbHeadTh = tbHead.find('tr th');//获取thead下的tr下的th 
var tbBody = tableObject.children('tbody');//获取table对象下的tbody 
var tbBodyTr = tbBody.find('tr');//获取tbody下的tr 
var sortIndex = -1; 
tbHeadTh.each(function() {//遍历thead的tr下的th 
var thisIndex = tbHeadTh.index($(this));//获取th所在的列号 
$(this).mouseover(function(){ 
tbBodyTr.each(function(){//编列tbody下的tr 
var tds = $(this).find("td");//获取列号为参数index的td对象集合 
$(tds[thisIndex]).addClass("hover"); 
}); 
}).mouseout(function(){ 
tbBodyTr.each(function(){ 
var tds = $(this).find("td"); 
$(tds[thisIndex]).removeClass("hover"); 
}); 
}); 
$(this).click(function() { 
var dataType = $(this).attr("type"); 
checkColumnValue(thisIndex, dataType); 
}); 
}); 
$("tbody tr").removeClass();//先移除tbody下tr的所有css类 
$("tbody tr").mouseover(function(){ 
$(this).addClass("hover"); 
}).mouseout(function(){ 
$(this).removeClass("hover"); 
}); 
//对表格排序 
function checkColumnValue(index, type) { 
var trsValue = new Array(); 
tbBodyTr.each(function() { 
var tds = $(this).find('td'); 
trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html()); 
$(this).html(""); 
}); 
var len = trsValue.length; 
if(index == sortIndex){ 
trsValue.reverse(); 
} else { 
for(var i = 0; i < len; i++){ 
type = trsValue[i].split(".separator")[0]; 
for(var j = i + 1; j < len; j++){ 
value1 = trsValue[i].split(".separator")[1]; 
value2 = trsValue[j].split(".separator")[1]; 
if(type == "number"){ 
value1 = value1 == "" ? 0 : value1; 
value2 = value2 == "" ? 0 : value2; 
if(parseFloat(value1) > parseFloat(value2)){ 
var temp = trsValue[j]; 
trsValue[j] = trsValue[i]; 
trsValue[i] = temp; 
} 
} else if(type == "ip"){ 
if(ip2int(value1) > ip2int(value2)){ 
var temp = trsValue[j]; 
trsValue[j] = trsValue[i]; 
trsValue[i] = temp; 
} 
} else { 
if (value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器 
var temp = trsValue[j]; 
trsValue[j] = trsValue[i]; 
trsValue[i] = temp; 
} 
} 
} 
} 
} 
for(var i = 0; i < len; i++){ 
$("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]); 
} 
sortIndex = index; 
} 
//IP转成整型 
function ip2int(ip){ 
var num = 0; 
ip = ip.split("."); 
num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); 
return num; 
} 
})

运行结果：
Jquery 选中表格一列并对表格排序实现原理 
特别感谢网友“夏の寒风”，在Jquery的相关操作上要是没有“夏の寒风”的帮忙肯定很难完成。对这个效果自己还是很满意的，只是在实现的操作上拼接字符串，截取字符串的过程有些繁琐，不够简单明了，还有待改进。

Jquery 选中表格一列并对表格排序实现原理

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
页面中iframe相互传值传参
Dec 13 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
js 操作select和option常用代码整理
Dec 13 #Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 #Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 #Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 #Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 #Javascript
javaScript复制功能调用实现方案
Dec 13 #Javascript
js遍历td tr等html元素
Dec 13 #Javascript
Spring(9) 温控(1) 小喇叭开始广播了(1) 增删查改(1) 脏读(2) S-2000(1) 小喇叭(1) 微信(2) Lifecycle(1) IC-R9500(1)
You might like
Zend引擎的发展 [15]
2006/10/09 PHP
php 破解防盗链图片函数
2008/12/09 PHP
php去除数组中重复数据
2014/11/18 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
jquery的Theme和Theme Switcher使用小结
2010/09/08 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
jquery获取节点名称
2015/04/26 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
保荐人的岗位职责
2013/11/19 职场文书
党员个人思想汇报
2013/12/28 职场文书
团委竞选演讲稿
2014/04/24 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
个人作风建设总结
2014/10/23 职场文书
工作保证书
2015/01/17 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
绿色环保倡议书
2015/04/28 职场文书
JavaWeb 入门篇（3）ServletContext 详解 具体应用
2021/07/16 Java/Android
图文详解Nginx版本平滑升级方案
2021/09/15 Servers