在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. <script>
  14. $(function(){
  15. var pk=1;
  16. $(".title td").click(function(){
  17. // 把要排序的内容添加到数组里
  18. var tIndex=parseInt($(this).index());
  19. var valueArray=new Array();
  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排序html表格的更多相关文章

  1. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  2. JS实现前台表格排序功能

    JS实现前台表格排序功能 虽然数据量不大的情况下,前台排序速度比较快,但一般情况下,我们的项目只使用后台排序,原因有二: 一是代码简单:二是前台JS排序对于有分页的情况无法处理. 前段时间,有个功能需 ...

  3. JS组件系列——表格组件神器：bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  4. JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  5. 利用JavaScript实现动态显示表格且对应改变按键的value值

    插入的代码并没有符合HTML5样式,只是为了实现利用JS动态显示表格,并且按键的value值会同时发生变化的功能. <!DOCTYPE > <html > <head&g ...

  6. 手把手教你用Vue造轮子（3）：开发可排序的表格组件

    前言 最近闰土大叔跟Vue干上了,没办法,公司业务驱动,不用Vue没招啊,leader尝到了前后端分离带来的好处,除非你离职,哈哈哈,当然,那是不可能的,对于我这种要攒钱买房子的人来说.那还说什么呢, ...

  7. [转]JS组件系列——表格组件神器：bootstrap table

    原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...

  8. JS组件系列——表格组件神器：bootstrap table 包含了js对象的定义和对象成员函数的定义

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  9. 总结下js排序算法和乱序算法

    其实本人最怕的就是算法,大学算法课就感觉老师在讲天书,而且对于前端来说,算法在实际的应用中实在是很有限.毕竟算法要依靠大量的数据为基础才能发挥出算法的效率,就浏览器那性能,......是吧,退一万步说 ...

随机推荐

  1. linux下DNS设置以及解析顺序

    1.编辑/etc/resolv.conf文件,添加如下语句: nameserver dns_ip(例如nameserver 8.8.8.8) 2.如/etc/nsswitch.conf中未包含启用DN ...

  2. 操作笔记：tomcat在正式环境

    1,一台服务器有两个容器,比如:jetty,tomcat. 出现问题: jetty启动的时候,tomcat就不能启动了. 此时,需要修改tomcat的配置文件:servler.xml <?xml ...

  3. Tomcat安装后启动一闪而过

    出现这种问题一般是环境变量没配置好.除了JDK环境变量还有Tomcat环境变量:CATALINA_HOME 和CATALINA_BASE 虽然JDK里面会含有JRE,但是最好是在环境变量里面也配置一个 ...

  4. APUE第4章 文件和目录

    4.2 文件函数 #include <sys/stat.h> int stat(const char *restrict pathname, struct stat *restrict b ...

  5. C#使用Cookie方法

    //写入 protected void Button1_Click(object sender, EventArgs e) { HttpCookie cookie=new HttpCookie(&qu ...

  6. CentOS学习笔记--文件权限概念

    Linux 文件权限概念 当你的屏幕出现了『Permission deny』的时候,不要担心,『肯定是权限设定错误』啦!(以下节选自 鸟哥的 Linux 私房菜 第六章.Linux 的文件权限与目录配 ...

  7. [leetcode]_Merge Two Sorted Lists

    题目:合并两个有序单链表 思路:一开始想复杂了,以为必须在原链表上修改(绕来绕去还AC了,但是思路相当绕),其实没有,按照正常地合并两个数组同样的方法也对. 代码: public ListNode m ...

  8. 前端构建工具grunt

    简单配置grunt 配置gulp还是grunt都是在node的环境下安装的,所以在这之前保证你的node环境已经安装好了! -------------------------------------- ...

  9. (转)Java操作Hbase进行建表、删表以及对数据进行增删改查，条件查询

    1.搭建环境 新建JAVA项目,添加的包有: 有关Hadoop的hadoop-core-0.20.204.0.jar 有关Hbase的hbase-0.90.4.jar.hbase-0.90.4-tes ...

  10. 清理文件默认打开方式.bat

    @echo offsetlocal enabledelayedexpansionset "ext=%~x1":loopif defined ext set "ext=!e ...