在web前端开发中会遇到排序等功能，当然也可以用服务器端来排序，今天我做一个笔记，怎么用js来实现这些复杂的功能呢。
在学习这个之前一定得用html dom jquery 的知识，要不没有办法看明白的，当然也不包括你是一个天才了。哈哈！
好了，先说一下思路，这里说一下，在学习一个js特效的时候思路很重要，可以说你不用对js多么的精通，但是一个功能放在你的面前，你必须有个很清晰的思路，这样做起来就很容易了，就算是再困难的特效也不例外！
一共有四个步骤：首先要给触发排序的控件添加事件，这里我就略过了。
1.把要排序的内容添加到数组里
var tIndex=parseInt($(this).index());var valueArray=newArray();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}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")}}}var titleClone=$("table tr").eq(0).clone(true);$("table").html("").append(titleClone);$("table").append($(".none").html())$(".none").html("");下面上一个完整的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>js排序特效</title><script src="http://suiyidian.cn/texiao/tab/jquery-1.5.2.min.js" type="text/javascript"></script><style>.main{ height:auto; overflow:hidden; margin:0pxauto;}.main td{ text-align:center; height:28px; width:100px; line-height:28px; font-size:14px; color:#555;}.main .title td{ cursor:pointer; color:#333}.none{ display:none}</style> <script> $(function(){var pk=1;$(".title td").click(function(){//把要排序的内容添加到数组里var tIndex=parseInt($(this).index());var valueArray=newArray();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><table class="main" width="500" border="0" cellspacing="1" bgcolor="#666666"><tr class="title"><td bgcolor="#CCCCCC">姓名</td><td bgcolor="#CCCCCC">年龄</td><td bgcolor="#CCCCCC">出生年</td><td bgcolor="#CCCCCC">分数</td></tr> <tr> <td bgcolor="#FFFFFF">李百（L）</td><td bgcolor="#FFFFFF">15</td> <td bgcolor="#FFFFFF">1988</td><td bgcolor="#FFFFFF">99</td> </tr><tr><td bgcolor="#FFFFFF">王易(W)</td><td bgcolor="#FFFFFF">25</td> <td bgcolor="#FFFFFF">2000</td><td bgcolor="#FFFFFF">150</td> </tr><tr><td bgcolor="#FFFFFF">林明(L)</td><td bgcolor="#FFFFFF">18</td> <td bgcolor="#FFFFFF">1745</td><td bgcolor="#FFFFFF">120</td> </tr><tr><td bgcolor="#FFFFFF">李姐(L)</td><td bgcolor="#FFFFFF">20</td> <td bgcolor="#FFFFFF">1996</td><td bgcolor="#FFFFFF">130</td> </tr></table><div class="none"></div> <div style="text-align:center; font-size:12px; margin-top:10px">特效出自：kevn-<a href="http://suiyidian.cn" target="_blank">web前段开发</a></div></body></html>