这篇文章主要介绍了利用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. oc字符串的用法

    #import <UIKit/UIKit.h> #import "AppDelegate.h" int main(int argc, char * argv[]) { ...

  2. Jmeter时间函数工具（参考）

    __time : 获取时间戳.格式化时间 ${__time(yyyy-MM-dd HH:mm:ss:SSS,time)}  :格式化生成时间格式 2018-06-01 11:08:23:635 ${_ ...

  3. Android手机在不同分辨率情况下字体自适应大小

    两种解决方法: 一. 1.首先根据不同分辨率获取不同字体大小. 在RES里创建values-480x320/strings.xml 里面设置<dimen name="Text_size ...

  4. NYOJ239 月老的难题 【二分图最大匹配&#183;匈牙利】

    月老的难题 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描写叙述 月老准备给n个女孩与n个男孩牵红线.成就一对对美好的姻缘. 如今,因为一些原因,部分男孩与女孩可能结成幸福 ...

  5. nginx配置文件中location说明

    1 nginx配置文件 文件结构 ... #全局块 events { #events块 ...} http #http块 { ... #http全局块 server #server块 { ... #s ...

  6. word2vec中文类似词计算和聚类的使用说明及c语言源代码

    word2vec相关基础知识.下载安装參考前文:word2vec词向量中文文本相似度计算 文件夹: word2vec使用说明及源代码介绍 1.下载地址 2.中文语料 3.參数介绍 4.计算相似词语 5 ...

  7. svn导出历史版本

    svn导出历史某一个版本,有时候想拷贝出项目某个版本的代码,又不希望覆盖现在的代码,需要用到导出历史版本 1.浏览历史版本    鼠标移到项目上右击显示: 2.选择显示日志,出现版本历史记录: 3.选 ...

  8. .NET url 的编码与解码

    举例: aaa.aspx?tag=.net%bc%bc%ca%f5 aaa.aspx?tag=.net%e6%8a%80%e6%9c%af看起来好像是不一样,其实他们都是对".net技术&q ...

  9. CCProgressTo和CCProgressTimer

    在cocos2d中同样提供了很多表现图片和精灵的方式,上一篇当中提到的切换场景的方式之一是顺或逆时针切入的方法,在图片上也可以使用,test里有一个例子介绍CCProgressTimer可以实现一些图 ...

  10. Java 如何实现线程间通信

    正常情况下,每个子线程完成各自的任务就可以结束了.不过有的时候,我们希望多个线程协同工作来完成某个任务,这时就涉及到了线程间通信了. 本文涉及到的知识点: thread.join(), object. ...