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 相关文章推荐
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
JavaScript 实现继承的几种方式
Feb 19 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
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程序?
2006/12/08 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
Python 字典中的所有方法及用法
2020/06/10 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
艺术应用与设计个人的自我评价
2013/11/23 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
五四青年节活动总结
2015/02/10 职场文书
员工离职证明范本
2015/06/12 职场文书
现实表现证明材料
2015/06/19 职场文书
创业计划书之美甲店
2019/09/20 职场文书