html表格整体放大,html表格排序之完全详解

html表格排序的流程为：

1  获取鼠标点击的 表头单元格 的列号

2  遍历所有的数据行，获取每个

中的html

3  同时获取每个

标签下对应获取到的列号的标签中的内容

4  并取得

标签的type属性值(number  string  ip)

5  将获取

的html、的内容和的type属性值拼接成字符串添加到数组array中

6  然后将表格

中的html全部置空

7  根据type属性值的不同采用不同的方法对

的内容进行比较

8  根据比较结果对数组array进行排序

9  然后将排序后的数组元素重新赋值给已经置空的

10  如果已经对该列排序过了，则直接对数组进行倒置

提供数值、字符串以及IP地址三种类型的排序规则。字符串类型排序规则采用javascript的localeCompare方法。

具体代码：

HTML>

 表格排序 

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;

}

序号书名价格(元)出版时间印刷量(册)IP

1狼图腾29.802009-1050000192.168.1.1252孝心不能等待29.802009-09800192.68.1.1253藏地密码228.002008-10192.102.0.124藏地密码124.802008-10215.34.126.105设计模式之禅69.002011-12192.168.1.56轻量级 Java EE 企业应用实战99.002012-045000192.358.1.1257Java 开发实战经典79.802012-012000192.168.1.258Java Web 开发实战经典69.802011-112500215.168.54.125

$(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"); //获取当前点击列的 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() { //遍历所有的tr标签

var tds = $(this).find('td');//查找所有的 td 标签

//将当前的点击列 push 到一个新的列表中

//包括 当前行的 类型、当前索引的 值，和当前行的值

trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html());

$(this).html("");//清空当前列

});

var len = trsValue.length;//获取所有要拍戏的列的长度

if(index == sortIndex){//sortIndex =-1

trsValue.reverse();//???

} else {

for(var i = 0; i 

type = trsValue[i].split(".separator")[0];// 获取要排序的类型

for(var j = i + 1; j 

value1 = trsValue[i].split(".separator")[1];//当前值

value2 = trsValue[j].split(".separator")[1];//当前值的下一个

if(type == "number"){

//js 三元运算  如果 values1 等于 '' (空) 那么，该值就为0，否则 改值为当前值

value1 = value1 == "" ? 0 : value1;

value2 = value2 == "" ? 0 : value2;

//parseFloat() 函数可解析一个字符串，并返回一个浮点数。

//该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。

//如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。

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 {

//JavaScript localeCompare() 方法 用本地特定的顺序来比较两个字符串。

//说明比较结果的数字。

// 如果 stringObject 小于 target，则 localeCompare() 返回小于 0 的数。

// 如果 stringObject 大于 target，则该方法返回大于 0 的数。

// 如果两个字符串相等，或根据本地排序规则没有区别，该方法返回 0。

if (value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器

var temp = trsValue[j];

trsValue[j] = trsValue[i];

trsValue[i] = temp;

}

}

}

}

}

for(var i = 0; i 

//将排序完的 值 插入到 表格中

//:eq(index) 匹配一个给定索引值的元素

$("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]);

//console.log($("tbody tr:eq(" + i + ")").html())

}

sortIndex = index;

}

//IP转成整型 ？？？？？

function ip2int(ip){

var num = 0;

ip = ip.split(".");

//Number() 函数把对象的值转换为数字。

num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]);

return num;

}

})