这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序，其中包含数字排序、字符串排序以及日期格式的排序，文中给出了完整的示例代码，并做了注释，相信大家都能看懂，感兴趣的朋友们一起来看看吧。

<!DOCTYPE>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>JS实现点击表头表格自动排序（含数字、字符串、日期）</title>

        <style>

            #tableSort {

                moz-user-select: -moz-none;

                -moz-user-select: none;

                -o-user-select: none;

                -khtml-user-select: none;

                -webkit-user-select: none;

                -ms-user-select: none;

                user-select: none;

                border-collapse: collapse;

                border-spacing: 0;

                margin: 0;

                padding: 0;

                width: 100%;

                text-align: center;

                margin: 15px 0;

            }

            #tableSort th {

                cursor: pointer;

                background: #eee

            }

            #tableSort tr:nth-child(even) {

                background: #f9f9f9

            }

            #tableSort th,

            #tableSort td {

                padding: 10px;

                border: 1px solid #ccc;

            }

        </style>

    </head>

    <body>

        <table id="tableSort">

            <thead>

                <tr>

                    <th data-type="num">ID</th>

                    <th data-type="string">姓名</th>

                    <th data-type="string">性别</th>

                    <th data-type="date">时间</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>07</td>

                    <td>zzzz</td>

                    <td>男</td>

                    <td>2012-12-12</td>

                </tr>

                <tr>

                    <td>03</td>

                    <td>yyyy</td>

                    <td>女</td>

                    <td>2013-12-16</td>

                </tr>

                <tr>

                    <td>01</td>

                    <td>hhhh</td>

                    <td>男</td>

                    <td>2014-12-12</td>

                </tr>

                <tr>

                    <td>04</td>

                    <td>wwww</td>

                    <td>女</td>

                    <td>2018-01-12</td>

                </tr>

                <tr>

                    <td>02</td>

                    <td>dddd</td>

                    <td>男</td>

                    <td>2016-12-18</td>

                </tr>

                <tr>

                    <td>06</td>

                    <td>ssss</td>

                    <td>女</td>

                    <td>2018-03-16</td>

                </tr>

                <tr>

                    <td>05</td>

                    <td>tttt</td>

                    <td>男</td>

                    <td>2017-07-22</td>

                </tr>

            </tbody>

        </table>

        <script>

            ;

            (function() {

                var tbody = document.querySelector('#tableSort').tBodies[0];

                var th = document.querySelector('#tableSort').tHead.rows[0].cells;

                var td = tbody.rows;

                for(var i = 0; i < th.length; i++) {

                    th[i].flag = 1;

                    th[i].onclick = function() {

                        sort(this.getAttribute('data-type'), this.flag, this.cellIndex);

                        this.flag = -this.flag;

                    };

                };

                function sort(str, flag, n) {

                    var arr = [];//存放DOM

                    for(var i = 0; i < td.length; i++) {

                        arr.push(td[i]);

                    };

                     //排序

                    arr.sort(function(a, b) {

                        return method(str, a.cells[n].innerHTML, b.cells[n].innerHTML) * flag;

                    });

                    //添加

                    for(var i = 0; i < arr.length; i++) {

                        tbody.appendChild(arr[i]);

                    };

                };

                //排序方法

                function method(str, a, b) {

                    switch(str) {

                        case 'num': //数字排序

                            return a - b;

                            break;

                        case 'string': //字符串排序

                            return a.localeCompare(b);

                            break;

                        default:  //日期排序，IE8下'2012-12-12'这种格式无法设置时间，替换成'/'

                            return new Date(a.split('-').join('/')).getTime() - new Date(b.split('-').join('/')).getTime();

                    };

                };

            })();

        </script>

    </body>

    </html>

效果图：

按时间排序（其他效果大家可以自己在本地预览）：

转载于：JS实现点击表头表格自动排序（含数字、字符串、日期）

JS实现点击表头表格自动排序（含数字、字符串、日期）的更多相关文章

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

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

  2. Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"\@"

    Html Table用JS导出excel格式问题 我在网上找的JS把HTML Tabel导出成EXCEL.但是如果Table里的数字内容为0开的的导成Excel后会自动删除0,我想以text的格式写入 ...

  3. 一百零一、SAP中ALV事件之十四，让ALV表格自动排序

    如果我们需要对下图的凭证日期和物料进行排序,需要怎么做呢 一.我们来到ALV的定义 二.我们查看IT_SORT的定义,双击点进去 三.查看SLIS_T_SORTINFO_ALV定义 四.代码如下,定义 ...

  4. AdvStringGrid 点击标题头 自动排序

  5. ios排序NSArray(数字.字符串)

    NSArray *originalArray = @[@"1",@"21",@"12",@"11",@"0&q ...

  6. sql server使用公用表表达式CTE通过递归方式编写通用函数自动生成连续数字和日期

    问题:在数据库脚本开发中,有时需要生成一堆连续数字或者日期,例如yearly report就需要连续数字做年份,例如daily report就需要生成一定时间范围内的每一天日期.而自带的系统表mast ...

  7. C#：ListView控件如何实现点击列表头进行排序？

    using System; using System.Collections; using System.Windows.Forms; namespace Common { /// <summa ...

  8. QT中Qtableview视图表格中点击表头进行排序

    用QT写了一个小工具,主要是对Excel中大量的数据进行计算和显示. 写了有一段时间,然后断断续续的做一些修改和完善. 因为要显示的数据有多列,很自然的会想到要能够对显示的数据进行排序.如果直接操作m ...

  9. 非常强大的table根据表头排序,点击表头名称,对其内容排序

    js代码: /** * 通过表头对表列进行排序 * * @param sTableID * 要处理的表ID<table id=''> * @param iCol * 字段列id eg: 0 ...

随机推荐

  1. OAF_OAF增删改-新增的实现（案例）

    2014-09-14 Created By BaoXinjian

  2. Python isspace() 方法

    描述 Python isspace() 方法检测字符串是否只由空格组成. 语法 isspace() 方法语法: S.isspace() 参数 无. 返回值 如果字符串中至少有一个字符,并且所有字符都是 ...

  3. mysql InnoDB 的行锁

    表的引擎类型必须为InnoDB才可以进行此操作. 相关链接:http://www.cnblogs.com/CyLee/p/5579672.html 共享锁:单独运行前两句,然后新建一个会话使用第三句. ...

  4. MATLAB（3）——GUI界面设计入门

    作者:桂. 时间:2017-03-01  18:43:35 链接:http://www.cnblogs.com/xingshansi/articles/6485688.html 声明:转载请注明出处, ...

  5. springmvc+spring+mybatis+maven项目构建

    1.首先在myeclipse10中安装maven的插件,将插件放入D:\Program Files (x86)\myEclipse10\MyEclipse Blue Edition 10\dropin ...

  6. PCIe调试心得_DMA part3

    作者: East  FPGA那点事儿 上一章讲述了PCIe总线如何提高DMA的效率. 本章以服务器常用的4通道1000M以太网卡为例讲述如何实现多个虚拟DMA通道. 1.多通道DMA发 4通道以太网卡 ...

  7. Avoid strong reference cycles

    转自:http://masteringios.com/blog/2014/03/06/avoid-strong-reference-cycles/ With the introduction of A ...

  8. Cocos2d-x 3.0 rc0中加入附加项目，解决无法打开包括文件:“extensions/ExtensionMacros.h”

    Cocos2d-x 3.0 Alpha 1开始 对目录结构进行了整合.结果有些附加项目也被在项目中被精简出去. 比如说如果你需要使用CocoStdio导出的JSON.或使用Extensions扩展库, ...

  9. cvs history，CVS中查询目录下所有文件的提交记录

    我们习惯用eclipse svn中查看一个目录下,甚至整个工程下,所有的文件的变更列表:操作为:右键工程 -> Team -> Show History. 最近在使用CVS,eclipse ...

  10. Python 2.7.9 Demo - 014.列表List的定义、取值、遍历

    #coding=utf-8 #!/usr/bin/python list = ['a', 1, 'b', 2, 'c', 3]; print list[0]; print list[1:3]; pri ...