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

利用js排序html表格

浏览:2497次  出处信息

在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++){
  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: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.  
  14. <script>
  15.  
  16. $(function(){
  17. var pk=1;
  18. $(".title td").click(function(){
  19. //把要排序的内容添加到数组里
  20. var tIndex=parseInt($(this).index());
  21. var valueArray=newArray();
  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

建议继续学习：

  1. 如何使用1M的内存排序100万个8位数    (阅读：10901)
  2. 快速排序（Quicksort）的Javascript实现    (阅读：10089)
  3. 腾讯-1亿个数据取前1万大的整数-题解答    (阅读：9042)
  4. 深入浅出插入类排序算法(直接插入, 折半插入, 希尔排序)    (阅读：6188)
  5. 深入浅出交换类排序算法(冒泡排序,快速排序)    (阅读：5986)
  6. Java程序员必知的8大排序算法    (阅读：4458)
  7. Mysql中的排序优化    (阅读：4359)
  8. Vim(gVim)对排序的妙用    (阅读：4221)
  9. 快速排序详细分析    (阅读：3955)
  10. 深入浅出选择类排序算法(简单选择排序,堆排序)    (阅读：3753)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：Underscore.js-精巧而强大实用功能库
后一篇：使用window.postMessage实现跨域通信 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1