zoukankan      html  css  js  c++  java

  • 利用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
  • 相关阅读:
    ARC071F Infinite Sequence
    AGC043C Giant Graph
    ARC006E Addition and Subtraction Hard
    Codechef BALNET Balancing Network Revisited
    Gym102055H Game on the Tree
    Luogu P5320 [BJOI2019]勘破神机
    cookie和session
    jsp介绍
    request请求转换成对象。
    域对象 request
  • 原文地址：https://www.cnblogs.com/jinhuixin/p/4081643.html
Copyright © 2011-2022 走看看