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

　　在前端对表格排序的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>

　　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>

　　<thead>

　　<tr>

　　</tr>

　　</thead>

　　<tbody>

　　</tr>

　　<tr>

　　<td>孝心不能等待</td>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　<td>设计模式之禅</td>

　　</tr>

　　<tr>

　　<td>轻量级 Java EE 企业应用实战</td>

　　</tr>

　　<tr>

　　<td>Java 开发实战经典</td>

　　</tr>

　　<tr>

　　<td>Java Web 开发实战经典</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的相关操作上要是没有“夏の寒风”的帮忙肯定很难完成。对这个效果自己还是很满意的，只是在实现的操作上拼接字符串，截取字符串的过程有些繁琐，不够简单明了，还有待改进。

教程首页更多教程