在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. 实时显示GetLastError值

    在Watch窗口中输入$err,hr 自动显示上个函数返回值

  2. 关闭GS选项，解决注入后崩溃

    利用CreateRemoteThread向进程注入远程代码时,一般会有以下两种做法: 利用LoadLibrary在目标进程加载指定的DLL 将代码复制到目标进程,然后启动这段代码 上面的第二种方法其实 ...

  3. Avl树的基本操作（c语言实现）

    #include<stdio.h> #include<stdlib.h> typedef struct AvlNode *Position; typedef struct Av ...

  4. Leetcode006 ZigZag Conversion

    /* simple simulation algorithm * we cann`t make sure the size of the string, * so it had better to s ...

  5. 【Python】django表单与提交

    参考:http://djangobook.py3k.cn/2.0/chapter07/ 本文的内容应属于django的表单模块,没有涉及到的后端request对象的处理方法可以单独深入学习表单. UR ...

  6. 数学对象Math ceil()、floor()、round()方法

      Math.ceil()   功能:对一个数进行上取整. 语法:Math.ceil(x) 参数: x:一个数值. 返回值:返回大于或等于x,并且与之最接近的整数. 注:如果x是正数,则把小数“入”: ...

  7. dedecms 文章页调用来源合适时间的方法

    时间: 一:{dede:field.pubdate function="MyDate('Y-m-d H:i',@me)"/} 二:{dede:field name='pubdate ...

  8. 凡聊过必留下痕迹-破解加密的WeChat数据库

    有个朋友上门寻求协助,带着她朋友的朋友的手机,说是手机硬件有问题,想把手机内的资料都备份出来,尤其是WeChat的聊天内容…我跟她说,那iTool等工具不就可以帮上忙了吗?没想到她早就试过了, 说iT ...

  9. .net分页控件webdiyer:AspNetPager

    首先下载:AspNetPager.dll   AspNetPager.xml  放到bin目录下 页面添加<%@ Register Assembly="AspNetPager" ...

  10. js,jquery获取下拉框选中的option

    js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...