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

这篇文章主要介绍了利用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实现点击表头表格自动排序（含数字、字符串、日期）