这篇文章主要介绍了利用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 OAWebBean和OAPageContext的分析（概念）

    2015-04-03 Created By BaoXinjian

  2. Android：GridView中实现点击Item变色，再点击还原。

    使用GridView时想实现点击其中的一个Item,该Item改变背景,再次点击Item变回原来的背景,网上搜了很多资料都没有看到类似的案例,但还是有所启发,现来分享我的做法. 首先,首先为GridV ...

  3. 文件的内核结构file和dup实现重定向

    一.打开文件内核数据结构 1.一个进程打开两个文件 文件状态标志:读.写.追加.同步.非阻塞等 2.一个进程两次打开同一文件 3.两个进程打开同一文件 示例程序:  C++ Code  1 2 3 4 ...

  4. 项目打成jar包

    distributionManagement 为发布到本地参考的地址 repository 设置从本地maven库拉取jar包 <project xmlns:xsi="http://w ...

  5. unity hide/show text

    using UnityEngine;using System.Collections; public class PlayerController:MonoBehaviour{    public U ...

  6. 【Android】4.0 Android项目的基本结构

    分类:C#.Android.VS2015: 创建日期:2016-02-06: 修改日期:2016-02-27 一.简介 第3章虽然通过百度地图应用展示了你可能感兴趣的内容,但是,如果你是一个初学者,一 ...

  7. Chisel Tutorial（七）——模块

    下面内容根据2015-7-10版的Chisel 2.2 Tutorial整理 Chisel中的模块与Verilog HDL中模块的概念十分相似,都是用层次结构描写叙述电路.Chisel中的module ...

  8. ControlExtensionTest(二)-----CCControlSlider

    #include "../CCControlScene.h" class CCControlSliderTest : public CCControlScene { public: ...

  9. 收集Cocos2d提供的字体！共57种

    很多游戏中,便于开发就会直接采用Cocos2d提供的字体库来使用,但是因为提供的种类很多,那么Himi利用一些时间整理了57种字体样式,这些我想足够你用了: 不多说下面一起来看看吧:(每张图对应11种 ...

  10. cocos2d-x 3.0点击响应

    迄今为止,发现cocos2d-x 3.0最让人惊艳的地方就是更改了点击事件机制.(ps:迄今只看了点击事件这块,捂嘴笑~~~) cocos2d-x 2.0 只有CCLayer有点击事件处理,需要注册, ...