码迷,mamicode.com
首页 > 编程语言 > 详细

利用js排序html表格

时间:2014-11-07 18:43:03      阅读:392      评论:0      收藏:0      [点我收藏+]

标签:style   http   io   color   ar   java   sp   for   strong   

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++){
  5. if(tIndex!=0){
  6. valueArray[p]=parseInt($("table tr:eq("+i+") td").eq(tIndex).html());
  7. }else{
  8. valueArray[p]=$("table tr:eq("+i+") td").eq(tIndex).html();
  9. }
  10. p++;
  11. }

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. }
  8. }

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

  1. var titleClone=$("table tr").eq(0).clone(true);
  2. $("table").html("").append(titleClone);
  3. $("table").append($(".none").html())
  4. $(".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++){
  24. if(tIndex!=0){
  25. valueArray[p]=parseInt($("table tr:eq("+i+") td").eq(tIndex).html());
  26. }else{
  27. valueArray[p]=$("table tr:eq("+i+") td").eq(tIndex).html();
  28. }
  29. p++;
  30. }
  31. //数据排序
  32. if(pk==1){
  33. valueArray.sort(function(a,b){ return a<b ? -1:1})
  34. pk=2
  35. }else{
  36. valueArray.sort(function(a,b){ return a>b ? -1:1})
  37. pk=1
  38. }
  39. //匹配内容 加入到一个隐藏的排序div里+-
  40. for(var i=0; i<valueArray.length; i++){
  41. for(var d=1; d<$("table tr").length; d++){
  42. var valueText= tIndex!=0 ? parseInt($("table tr:eq("+d+") td").eq(tIndex).html()):$("table tr:eq("+d+") td").eq(tIndex).html();
  43. if(valueArray[i]==valueText){
  44. $("table tr").eq(d).clone().appendTo(".none")
  45. }
  46. }
  47. }
  48. //重新整理html 排序,添加到视图里
  49. var titleClone=$("table tr").eq(0).clone(true);
  50. $("table").html("").append(titleClone);
  51. $("table").append($(".none").html())
  52. $(".none").html("");
  53. })
  54.  
  55. })
  56. </script>
  57. </head>
  58.  
  59. <body>
  60. <table class="main" width="500" border="0" cellspacing="1" bgcolor="#666666">
  61. <tr class="title">
  62. <td bgcolor="#CCCCCC">姓名</td>
  63. <td bgcolor="#CCCCCC">年龄</td>
  64. <td bgcolor="#CCCCCC">出生年</td>
  65. <td bgcolor="#CCCCCC">分数</td>
  66. </tr>
  67. <tr>
  68. <td bgcolor="#FFFFFF">李百(L)</td>
  69. <td bgcolor="#FFFFFF">15</td>
  70. <td bgcolor="#FFFFFF">1988</td>
  71. <td bgcolor="#FFFFFF">99</td>
  72. </tr>
  73. <tr>
  74. <td bgcolor="#FFFFFF">王易(W)</td>
  75. <td bgcolor="#FFFFFF">25</td>
  76. <td bgcolor="#FFFFFF">2000</td>
  77. <td bgcolor="#FFFFFF">150</td>
  78. </tr>
  79. <tr>
  80. <td bgcolor="#FFFFFF">林明(L)</td>
  81. <td bgcolor="#FFFFFF">18</td>
  82. <td bgcolor="#FFFFFF">1745</td>
  83. <td bgcolor="#FFFFFF">120</td>
  84. </tr>
  85. <tr>
  86. <td bgcolor="#FFFFFF">李姐(L)</td>
  87. <td bgcolor="#FFFFFF">20</td>
  88. <td bgcolor="#FFFFFF">1996</td>
  89. <td bgcolor="#FFFFFF">130</td>
  90. </tr>
  91. </table>
  92. <div class="none"></div>
  93.  
  94. <div style="text-align:center; font-size:12px; margin-top:10px"> 特效出自:kevn-<a href="http://suiyidian.cn" target="_blank">web前段开发</a></div>
  95. </body>
  96. </html>

bubuko.com,布布扣

利用js排序html表格

标签:style   http   io   color   ar   java   sp   for   strong   

原文地址:http://www.cnblogs.com/jinhuixin/p/4081643.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!