在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. yii中第三方库

    yii中存在一些路径别名:ext:表示包含了所有第三方扩展的目录  参考:http://www.yiiframework.com/doc/guide/1.1/zh_cn/basics.namespac ...

  2. 学习总结 java Iterator迭代器练习

    package com.hanqi.jh; import java.util.*; public class Text3 { public static void main(String[] args ...

  3. 使用Cookie保存商品浏览记录

    数据流程:页面上是商品列表,点击<a href="productServlet">商品名</a> ==>跳转到自定义的servlet中进行处理,先得到 ...

  4. pb中读取大文本数据

    string ls_FileName,lb_FileDatas,lb_FileData  long ll_FileLen,ll_Handle,ll_Loop,ll_Bytes,ll_Loops,ll_ ...

  5. c# 将页面导出到word（含图片及控件）

    /// <summary> /// 创建word /// <param name="filePath">文件路径 </param> /// &l ...

  6. 【Linux】Centos部署MySQL

    将CentOS部署MySQL需要本地配置环境.本地编译MySQL,耗时较长的情况,优化为编译成型MySQL并打包,推送并按配置部署. 首先需要在一台机器配置好环境,搭个YUM源,并将所需要的包取出备用 ...

  7. 样式重置 取消input默认样式

    body, h1, h2, h3, h4, h5, h6, hr, p,blockquote, dl, dt, dd, ul, ol, li,pre, form, fieldset, legend, ...

  8. WPF拖动DataGrid中的数据到ListBox

    1.效果图: 2.XAML <Window x:Class="WpfApplication2.MainWindow" xmlns="http://schemas.m ...

  9. Spring框架搭建遇到的问题汇总

    1.The resource is not on the build path of a Java project 然后把相应的依赖加入构建路径 2.Type mismatch: cannot con ...

  10. ADO访问Access数据库错误解决心得随笔

    最近在用ADO访问Access数据库的时候出现了一个奇怪的错误,觉得有必要记录下来,和大家分享一下. 环境 win7 x86系统: VS2012编译器: Office2010: Access2000~ ...