在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. 设置Eclipse自动跳转到debug模式的小技巧

    默认情况下,eclipse中右键debug,当运行到设置的断点时会自动跳到debug模式下.但由于我的eclipse环境,从开始一直用到现在,中间包括装.卸各种插件,更换版本,从英文界面导到中文界面又 ...

  2. 延迟jquery,ready事件触发的时间

    $.holdReady(true);//holdReady必须在ready()方法调用之前来调用,来延迟ready()方法的执行 $(document).ready(function(){ conso ...

  3. JS常用的设计模式(16)—— 享元模式

    享元模式主要用来减少程序所需的对象个数. 有一个例子, 我们这边的前端同学几乎人手一本<JavaScript权威指南>. 从省钱的角度讲, 大约三本就够了. 放在部门的书柜里, 谁需要看的 ...

  4. 在XML序列化时去除默认命名空间xmlns:xsd和xmlns:xsi

    摘 自: http://blog.csdn.net/fxhflower/article/details/7276820 可使用以下代码: //Create our own namespaces for ...

  5. leetcode 13

    罗马数字是阿拉伯数字传入之前使用的一种数码.罗马数字采用七个罗马字母作数字.即Ⅰ(1).X(10).C(100).M(1000).V(5).L(50).D(500). 记数的方法: 相同的数字连写,所 ...

  6. 2.2安装JDK

    在Ubuntu下安装JDK的步骤: (1)首先需要自己安装的Ubuntu系统是多少位的,可以使用命令[getconf LONG_BIT]获取这个信息: (2)在JDK官网下载相应(选取和Linux系统 ...

  7. 定时器Timer

    定时器类:Timer 构造函数:Timer(TimerCallback callback, object state, uint dueTime, uint period) callback:中断处理 ...

  8. 几个较好的SQL速查手册网址

    微软 SQL server 数据库开发手册 数据库设计 Transact-SQL 速查手册 数据库设计 MySQL 中文参考手册速查 结构化查询语言 SQL 学习手册速查 转自:http://www. ...

  9. php header 函数详解

    网页的缓存是由 HTTP消息头中的“Cache-control”来控制的,常见的取值有private.no-cache.max-age.must- revalidate等,默认为private.其作用 ...

  10. win32 汇编打造 wget 体积3kb

    Demo Code .386 .MODEL flat, stdcall OPTION CASEMAP:NONE Include windows.inc include kernel32.inc inc ...