这篇文章主要介绍了利用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. 安卓请求网络错误 直接在main Thread 进行网络操作出现maintreamexception

    StrictMode.setThreadPolicy(new StrictMode.ThreadPolicy.Builder() .detectDiskReads().detectDiskWrites ...

  2. Concurrency Managed Workqueue(二)CMWQ概述

    一.前言 一种新的机制出现的原因往往是为了解决实际的问题,虽然linux kernel中已经提供了workqueue的机制,那么为何还要引入cmwq呢?也就是说:旧的workqueue机制存在什么样的 ...

  3. Python直接赋值、浅拷贝和深度拷贝解析

    直接赋值:其实就是对象的引用(别名). 浅拷贝(copy):拷贝父对象,不会拷贝对象的内部的子对象. 深拷贝(deepcopy): copy 模块的 deepcopy 方法,完全拷贝了父对象及其子对象 ...

  4. Python isspace() 方法

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

  5. Javascript和OCX的结合历程

    这种相对古老的调用方式主要用在Windows系列平台上的多种语言软件之间的合作. 此次项目合作方式是,客户提供语音功能的OCX模块和VC++客户端软件,我需要在WEB软件中调用其中的接口开发相关功能, ...

  6. APP三种开发模式

    目前主流应用程序大体分为三种:Web App(网页应用).Hybrid Ap(混合应用)p. Native App(原生应用). nativeapp是一个原生程序,一般运行在机器操作系统上,有很强的交 ...

  7. django 连接mysql 数据库

    1.新建一个mysite项目:django-admin startproject mysite 2.进入项目目录,新建一个app : python manage.py startapp polls 3 ...

  8. LaTeX 编辑软件WinEdt使用简要介绍

    LaTeX 编辑软件WinEdt使用简要介绍   LaTeX 的起源非常牛逼,有一套书大家可能听说过<计算机程序设计艺术>,写了好几本.当然能在计算机方面写上艺术俩字的书恐怕不是我们一般人 ...

  9. 编写一个程序，开启 3 个线程，这三个线程的 ID 分别为 A、B、C，每个线程将自己的 ID 在屏幕上打印 10 遍，要求输出的结果必须按顺序显示。如：ABCABCABC…… 依次递归

    import java.util.concurrent.locks.Condition; import java.util.concurrent.locks.Lock; import java.uti ...

  10. angular学习笔记(二十三)-$http(1)-api

    之前说到的$http.get和$http.post,都是基于$http的快捷方式.下面来说说完整的$http: $http(config) $http接受一个json格式的参数config: conf ...