利用js排序html表格

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

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

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

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

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

  1. var tIndex=parseInt($(this).index());
  2. var valueArray=new Array();
  3. var p=0;
  4. for(var i=1; i<$("table tr").length; i++){
  6. if(tIndex!=0){
  7. valueArray[p]=parseInt($("table tr:eq("+i+") td").eq(tIndex).html());
  8. }else{
  9. valueArray[p]=$("table tr:eq("+i+") td").eq(tIndex).html();
  10. }
  12. p++;
  14. }

2.数据排序

  1. //数据排序
  2. if(pk==1){
  3. valueArray.sort(function(a,b){ return a<b ? -1:1})
  4. pk=2
  5. }else{
  6. valueArray.sort(function(a,b){ return a>b ? -1:1})
  7. pk=1
  8. }

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

  1. for(var i=0; i<valueArray.length; i++){
  2. for(var d=1; d<$("table tr").length; d++){
  3. var valueText= tIndex!=0 ? parseInt($("table tr:eq("+d+") td").eq(tIndex).html()):$("table tr:eq("+d+") td").eq(tIndex).html();
  4. if(valueArray[i]==valueText){
  5. $("table tr").eq(d).clone().appendTo(".none")
  6. }
  7. }
  9. }

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

  1. var titleClone=$("table tr").eq(0).clone(true);
  2. $("table").html("").append(titleClone);
  4. $("table").append($(".none").html())
  6. $(".none").html("");

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

 

下面上一个完整的代码

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>js排序特效</title>
  6. <script src="http://suiyidian.cn/texiao/tab/jquery-1.5.2.min.js" type="text/javascript"></script>
  7. <style>
  8. .main{ height:auto; overflow:hidden; margin:0px auto;}
  9. .main td{ text-align:center; height:28px; width:100px; line-height:28px ; font-size:14px; color:#555;}
  10. .main .title td{ cursor:pointer; color:#333}
  11. .none{ display:none}
  12. </style>
  13.  
  14. <script>
  15.  
  16. $(function(){
  17. var pk=1;
  18. $(".title td").click(function(){
  19. // 把要排序的内容添加到数组里
  20. var tIndex=parseInt($(this).index());
  21. var valueArray=new Array();
  22. var p=0;
  23. for(var i=1; i<$("table tr").length; i++){
  25. if(tIndex!=0){
  26. valueArray[p]=parseInt($("table tr:eq("+i+") td").eq(tIndex).html());
  27. }else{
  28. valueArray[p]=$("table tr:eq("+i+") td").eq(tIndex).html();
  29. }
  31. p++;
  33. }
  35. //数据排序
  36. if(pk==1){
  37. valueArray.sort(function(a,b){ return a<b ? -1:1})
  38. pk=2
  39. }else{
  40. valueArray.sort(function(a,b){ return a>b ? -1:1})
  41. pk=1
  42. }
  44. //匹配内容 加入到一个隐藏的排序div里+-
  45. for(var i=0; i<valueArray.length; i++){
  46. for(var d=1; d<$("table tr").length; d++){
  47. var valueText= tIndex!=0 ? parseInt($("table tr:eq("+d+") td").eq(tIndex).html()):$("table tr:eq("+d+") td").eq(tIndex).html();
  48. if(valueArray[i]==valueText){
  49. $("table tr").eq(d).clone().appendTo(".none")
  50. }
  51. }
  53. }
  54. //重新整理html 排序，添加到视图里
  55. var titleClone=$("table tr").eq(0).clone(true);
  56. $("table").html("").append(titleClone);
  58. $("table").append($(".none").html())
  60. $(".none").html("");
  64. })
  65.  
  66. })
  67. </script>
  68. </head>
  69.  
  70. <body>
  71. <table class="main" width="500" border="0" cellspacing="1" bgcolor="#666666">
  72. <tr class="title">
  73. <td bgcolor="#CCCCCC">姓名</td>
  74. <td bgcolor="#CCCCCC">年龄</td>
  75. <td bgcolor="#CCCCCC">出生年</td>
  76. <td bgcolor="#CCCCCC">分数</td>
  77. </tr>
  78. <tr>
  79. <td bgcolor="#FFFFFF">李百（L）</td>
  80. <td bgcolor="#FFFFFF">15</td>
  81. <td bgcolor="#FFFFFF">1988</td>
  82. <td bgcolor="#FFFFFF">99</td>
  83. </tr>
  84. <tr>
  85. <td bgcolor="#FFFFFF">王易(W)</td>
  86. <td bgcolor="#FFFFFF">25</td>
  87. <td bgcolor="#FFFFFF">2000</td>
  88. <td bgcolor="#FFFFFF">150</td>
  89. </tr>
  90. <tr>
  91. <td bgcolor="#FFFFFF">林明(L)</td>
  92. <td bgcolor="#FFFFFF">18</td>
  93. <td bgcolor="#FFFFFF">1745</td>
  94. <td bgcolor="#FFFFFF">120</td>
  95. </tr>
  96. <tr>
  97. <td bgcolor="#FFFFFF">李姐(L)</td>
  98. <td bgcolor="#FFFFFF">20</td>
  99. <td bgcolor="#FFFFFF">1996</td>
  100. <td bgcolor="#FFFFFF">130</td>
  101. </tr>
  102. </table>
  103. <div class="none"></div>
  104.  
  105. <div style="text-align:center; font-size:12px; margin-top:10px"> 特效出自：kevn-<a href="http://suiyidian.cn" target="_blank">web前段开发</a></div>
  106. </body>
  107. </html>

js排序特效_20140408230112.png

posted @ 2014-11-07 16:24  点石成金dscj  阅读(1570)  评论(0)  编辑  收藏  举报