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的相关操作上要是没有“夏の寒风”的帮忙肯定很难完成。对这个效果自己还是很满意的,只是在实现的操作上拼接字符串,截取字符串的过程有些繁琐,不够简单明了,还有待改进。
Javascript 相关文章推荐
jQuery ready函数滥用分析
Feb 16 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
JS 去除Array中的null值示例代码
Nov 20 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
JavaScript多种图形实现代码实例
Jun 28 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
You might like
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
javascript 函数调用规则
2009/08/26 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
线程和进程的区别及Python代码实例
2015/02/04 Python
详解Python验证码识别
2016/01/25 Python
Django框架封装外部函数示例
2019/05/28 Python
Python求离散序列导数的示例
2019/07/10 Python
python分布式计算dispy的使用详解
2019/12/22 Python
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
JSF界面控制层技术
2013/06/17 面试题
实习自我评价怎么写
2013/12/02 职场文书
监理资料员岗位职责
2014/01/03 职场文书
成绩单评语
2015/01/04 职场文书
清洁员岗位职责
2015/02/15 职场文书
校长个人总结
2015/03/03 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python