在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. POJ2001-Shortest Prefixes-Trie树应用

    沉迷WOW又颓了两天orz,暴雪爸爸要在国服出月卡了...这是要我好好学习吗?赶紧来刷题了... OJ:http://poj.org/problem?id=2001 题目大意是求所有字符串里每一个字符 ...

  2. Windows7：Visual Studio 2008试用版的评估期已经结束解决方法

    Windows7:Visual Studio 2008试用版的评估期已经结束解决方法       以前在Windows2003碰到这个问题时,都是到"控制面板→添加或删除程序"选择 ...

  3. C# 最简单的递归

    public void AddTree(int ParentID, TreeNode pNode) { TreeNode tn1 = new TreeNode(); DataView dvTree = ...

  4. ASP.NET的SEO：HTTP报头状态码---内容重定向

    本系列目录 我们经常说"404错误",你知道他指的是什么意思么? 404其实是Http报头所包含的一个"状态码",表明该Http请求失败.那么除此之外,还有哪些 ...

  5. PayPal 开发详解（五）：创建第一个应用，获取clientId和clientSecret

    1.创建APP 2.填写应用名称->创建应用 3.获取 clientId 和 clientSecret

  6. (转载)Android content provider基础与使用

    android有一个独特之处就是,数据库只能被它的创建者所使用,其他的应用是不能访问到的,所以如果你想实现不同应用之间的数据共享,就不得不用content provider了.在Android中,co ...

  7. C puzzles详解【51-57题】

    第五十一题 Write a C function which does the addition of two integers without using the '+' operator. You ...

  8. 标准的CSS盒子模型？与低版本IE的盒子模型有什么不同的？

    CSS盒子模型:由四个属性组成的外边距(margin).内边距(padding).边界(border).内容区(width和height); 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不 ...

  9. Android照相机应用

    前言 Android在设计架构的时候,采用了mashup(混搭)的设计理念,也就是说一切都是组建,自己写的是组件,别人提供的也是组件,使用的时候只要符合相关协议就可以把他们当作自己的组件.比如系统提供 ...

  10. PHPCMS建站经验分享

    在这里不对模型.模板设置.category,list,show等静态页面引入.配置文件(caches\configs\database.php 和 caches\configs\system.php) ...