利用js排序html表格

利用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>
14. <script>
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. })
66. })
67. </script>
68. </head>
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>
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>
相关阅读:
[转贴] 2016一月12日起.NET 4, 4.5 and 4.5.1 停止安全更新、技术支持 or hotfix
Windows Azure 入门 -- VS 2015部署 ASP.NET网站(项目) 与数据库
 [职场]工作多久才能换工作？下一个工作年薪该多高？
[转贴] ASP.NET -- Web Service (.asmx) & JSON
ADO.NET #3-1 (GridView + DataReader + SqlCommand)完全手写Code Behind
File 与 Log #3--动态加入控件，[图片版]访客计数器（用.txt档案来记录）
小图示优化
 GridView的 PreRender事件与范例--GridView + CheckBox，点选多列资料（复选删除）
[习题] FindControl 简单练习--GridView + CheckBox，点选多列数据（复选删除）#3 List或数组
 GridView的 PreRender事件与 RowCreated、RowDataBound事件大乱斗
原文地址：https://www.cnblogs.com/jinhuixin/p/4081643.html