技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> 利用js排序html表格

利用js排序html表格

浏览:2485次  出处信息

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

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

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

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

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



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

  2. var valueArray=newArray();

  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:0pxauto;}

  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. <script>

  14. $(function(){

  15. var pk=1;

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

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

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

  19. var valueArray=newArray();

  20. var p=0;

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

  22. if(tIndex!=0){

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

  24. }else{

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

  26. }

  27. p++;

  28. }

  29. //数据排序

  30. if(pk==1){

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

  32. pk=2

  33. }else{

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

  35. pk=1

  36. }

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

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

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

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

  41. if(valueArray[i]==valueText){

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

  43. }

  44. }

  45. }

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

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

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

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

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

  51. })

  52. })

  53. </script>

  54. </head>

  55. <body>

  56. <table class="main" width="500" border="0" cellspacing="1" bgcolor="#666666">

  57. <tr class="title">

  58. <td bgcolor="#CCCCCC">姓名</td>

  59. <td bgcolor="#CCCCCC">年龄</td>

  60. <td bgcolor="#CCCCCC">出生年</td>

  61. <td bgcolor="#CCCCCC">分数</td>

  62. </tr>

  63.  <tr>

  64.    <td bgcolor="#FFFFFF">李百(L)</td>

  65. <td bgcolor="#FFFFFF">15</td>

  66.    <td bgcolor="#FFFFFF">1988</td>

  67. <td bgcolor="#FFFFFF">99</td>

  68.  </tr>

  69. <tr>

  70. <td bgcolor="#FFFFFF">王易(W)</td>

  71. <td bgcolor="#FFFFFF">25</td>

  72.    <td bgcolor="#FFFFFF">2000</td>

  73. <td bgcolor="#FFFFFF">150</td>

  74.  </tr>

  75. <tr>

  76. <td bgcolor="#FFFFFF">林明(L)</td>

  77. <td bgcolor="#FFFFFF">18</td>

  78.    <td bgcolor="#FFFFFF">1745</td>

  79. <td bgcolor="#FFFFFF">120</td>

  80.  </tr>

  81. <tr>

  82. <td bgcolor="#FFFFFF">李姐(L)</td>

  83. <td bgcolor="#FFFFFF">20</td>

  84.    <td bgcolor="#FFFFFF">1996</td>

  85. <td bgcolor="#FFFFFF">130</td>

  86.  </tr>

  87. </table>

  88. <div class="none"></div>

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

  90. </body>

  91. </html>

js排序特效_20140408230112.png

建议继续学习:

  1. 如何使用1M的内存排序100万个8位数    (阅读:10869)
  2. 快速排序(Quicksort)的Javascript实现    (阅读:10075)
  3. 腾讯-1亿个数据取前1万大的整数-题解答    (阅读:9026)
  4. 深入浅出插入类排序算法(直接插入, 折半插入, 希尔排序)    (阅读:6167)
  5. 深入浅出交换类排序算法(冒泡排序,快速排序)    (阅读:5970)
  6. Java程序员必知的8大排序算法    (阅读:4439)
  7. Mysql中的排序优化    (阅读:4339)
  8. Vim(gVim)对排序的妙用    (阅读:4207)
  9. 快速排序详细分析    (阅读:3943)
  10. 深入浅出选择类排序算法(简单选择排序,堆排序)    (阅读:3739)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1