利用js排序html表格

在web前端开发中会遇到排序等功能，当然也可以用服务器端来排序，今天我做一个笔记，怎么用js来实现这些复杂的功能呢。

在学习这个之前一定得用html dom jquery 的知识，要不没有办法看明白的，当然也不包括你是一个天才了。哈哈！

好了，先说一下思路，这里说一下，在学习一个js特效的时候思路很重要，可以说你不用对js多么的精通，但是一个功能放在你的面前，你必须有个很清晰的思路，这样做起来就很容易了，就算是再困难的特效也不例外！

一共有四个步骤：首先要给触发排序的控件添加事件，这里我就略过了。

1.把要排序的内容添加到数组里

var tIndex=parseInt($(this).index());

var valueArray=new Array();

var p=0;

for(var i=1; i<$("table tr").length; i++){

if(tIndex!=0){

valueArray[p]=parseInt($("table tr:eq("+i+") td").eq(tIndex).html());

}else{

valueArray[p]=$("table tr:eq("+i+") td").eq(tIndex).html();

}

p++;

}

2.数据排序

//数据排序

if(pk==1){

valueArray.sort(function(a,b){ return a<b ? -1:1})

pk=2

}else{

valueArray.sort(function(a,b){ return a>b ? -1:1})

pk=1

}

3.匹配内容加入到一个隐藏的排序div里

for(var i=0; i<valueArray.length; i++){

for(var d=1; d<$("table tr").length; d++){

var valueText= tIndex!=0 ? parseInt($("table tr:eq("+d+") td").eq(tIndex).html()):$("table tr:eq("+d+") td").eq(tIndex).html();

if(valueArray[i]==valueText){

$("table tr").eq(d).clone().appendTo(".none")

}

4.重新整理html 排序，添加到视图里

var titleClone=$("table tr").eq(0).clone(true);

$("table").html("").append(titleClone);

$("table").append($(".none").html())

$(".none").html("");

通过这四个步骤就可以实现你要js排序的功能了，是不是很简单呢，也可以通过这个例子举一反三。这得看大家的想象力了。

下面上一个完整的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>js排序特效</title>

<style>

.main{ height:auto; overflow:hidden; margin:0px auto;}

.main td{ text-align:center; height:28px; 100px; line-height:28px ; font-size:14px; color:#555;}

.main .title td{ cursor:pointer; color:#333}

.none{ display:none}

</style>

$(function(){

var pk=1;

$(".title td").click(function(){

// 把要排序的内容添加到数组里

var tIndex=parseInt($(this).index());

var valueArray=new Array();

var p=0;

for(var i=1; i<$("table tr").length; i++){

if(tIndex!=0){

valueArray[p]=parseInt($("table tr:eq("+i+") td").eq(tIndex).html());

}else{

valueArray[p]=$("table tr:eq("+i+") td").eq(tIndex).html();

}

p++;

}

//数据排序

if(pk==1){

valueArray.sort(function(a,b){ return a<b ? -1:1})

pk=2

}else{

valueArray.sort(function(a,b){ return a>b ? -1:1})

pk=1

}

//匹配内容加入到一个隐藏的排序div里+-

for(var i=0; i<valueArray.length; i++){

for(var d=1; d<$("table tr").length; d++){

var valueText= tIndex!=0 ? parseInt($("table tr:eq("+d+") td").eq(tIndex).html()):$("table tr:eq("+d+") td").eq(tIndex).html();

if(valueArray[i]==valueText){

$("table tr").eq(d).clone().appendTo(".none")

}

//重新整理html 排序，添加到视图里

var titleClone=$("table tr").eq(0).clone(true);

$("table").html("").append(titleClone);

$("table").append($(".none").html())

$(".none").html("");

})

</script>

</head>

<body>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<div style="text-align:center; font-size:12px; margin-top:10px"> 特效出自：kevn-<a href="http://suiyidian.cn" target="_blank">web前段开发</a></div>

</body>

</html>