这篇文章主要介绍了利用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. 关系数据库元数据处理类(一) 创建MSSQL元数据具体处理类

    public class SqlServer : BaseMetadata { public SqlServer(string connectionString) : base(new DbUtili ...

  2. Android 实现 HttpClient 请求Https

    如题,默认下,HttpClient是不能请求Https的,需要自己获取 private static final int SET_CONNECTION_TIMEOUT = 5 * 1000; priv ...

  3. WebDav的java客户端开发包：sardine

    最近需要对WebDav服务器进行操作,查找了一下,基于java的开发包主要有这几个: slide Jackrabbit sardine webdavclient4j 其中slide是apache的一个 ...

  4. hdu 1280 前m大的数 哈希

    前m大的数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  5. （二）RocketMq入门之消息发送和接收

    一.消息产生.发送 public class Producer { public static void main(String[] args) throws MQClientException { ...

  6. mysql数据库以加索引方式提高性能

    数据库查询速率慢的情况下可以给对应的表加上对应的索引,能够有效的提高查询效率,mysql数据库添加索引的SQL入下: ALTER TABLE `table_name` ADD INDEX index_ ...

  7. 谱聚类（Spectral clustering）（1）：RatioCut

    作者:桂. 时间:2017-04-13  19:14:48 链接:http://www.cnblogs.com/xingshansi/p/6702174.html 声明:本文大部分内容来自:刘建平Pi ...

  8. 3dmax 物体的真正局部空间原点

    假设在3dmax中创建一个 长x宽x高=1cm x 1cm x 1cm 的单位立方体,则默认局部坐标系原点在底面中心,进入 “层次”面板->轴->调整轴,按下“仅影响轴”,再点“居中到对象 ...

  9. 基于RHCS的web双机热备集群搭建

    基于RHCS的web双机热备集群搭建 RHCS集群执行原理及功能介绍 1. 分布式集群管理器(CMAN)  Cluster Manager.简称CMAN.是一个分布式集群管理工具.它执行在集群的各个节 ...

  10. ISE联合modelsim功能仿真和综合后仿真

    1.代码输入 (1).新建一个ISE工程,名字为count4. (2).新建一个verilog文件 (3).选择verilog module 输入file name为count4,单击next默认知道 ...