php table字段排序,jquery实现table排序功能实例分享

本文主要介绍了jquery实现的table排序功能,涉及基于jQuery的页面元素属性动态操作及鼠标事件响应相关技巧,需要的朋友可以参考下，希望能帮助到大家。

Document

p

{

width: 1024px;

margin: 0 auto; /*p相对屏幕左右居中*/

}

table

{

border: solid 1px #666;

border-collapse: collapse;

width: 100%;

cursor: default; /*该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状,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;

}

$(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所在的列号

//给表态th增加鼠标位于上方时发生的事件

$(this).mouseover(function () {

tbBodyTr.each(function () {//编列tbody下的tr

var tds = $(this).find("td"); //获取列号为参数index的td对象集合

$(tds[thisIndex]).addClass("hover");//给列号为参数index的td对象添加样式

});

}).mouseout(function () {//给表头th增加鼠标离开时的事件

tbBodyTr.each(function () {

var tds = $(this).find("td");

$(tds[thisIndex]).removeClass("hover");//鼠标离开时移除td对象上的样式

});

});

$(this).click(function () {//给当前表头th增加点击事件

var dataType = $(this).attr("type");//点击时获取当前th的type属性值

checkColumnValue(thisIndex, dataType);

});

});

$("tbody tr").removeClass(); //先移除tbody下tr的所有css类

//table中tbody中tr鼠标位于上面时添加颜色,离开时移除颜色

$("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');

//获取行号为index列的某一行的单元格内容与该单元格所在行的行内容添加到数组trsValue中

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++) {

//split() 方法用于把一个字符串分割成字符串数组

//获取每行分割后数组的第一个值,即此列的数组类型,定义了字符串\数字\Ip

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;

}

})

序号

书名

价格(元)

出版时间

印刷量(册)

IP

1

狼图腾

29.80

2009-10

50000

192.168.1.125

2

孝心不能等待

29.80

2009-09

800

192.68.1.125

3

藏地密码2

28.00

2008-10

192.102.0.12

4

藏地密码1

24.80

2008-10

215.34.126.10

5

设计模式之禅

69.00

2011-12

192.168.1.5

6

轻量级 Java EE 企业应用实战

99.00

2012-04

5000

192.358.1.125

7

Java 开发实战经典

79.80

2012-01

2000

192.168.1.25

8

Java Web 开发实战经典

69.80

2011-11

2500

215.168.54.125

运行效果图如下：

相关推荐：