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

100 阅读 0 评论 66 点赞

我是靠谱客的博主害怕冬瓜，这篇文章主要介绍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, #tableBtcSort{
        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 ,#tableBtcSort th {
        cursor:pointer;
        background:#eee
    }
    #tableSort tr:nth-child(even) ,#tableBtcSort   tr:nth-child(even){
        background:#f9f9f9
    }
    #tableSort th,#tableSort td , #tableBtcSort th, #tableBtcSort td{
        padding:10px;
        border:1px solid #ccc;
    }

</style>
</head>

<table id="tableBtcSort">
    <thead>
    <tr>
        <th data-type="num" onclick="sortpais('tableBtcSort')">工号</th>
        <th data-type="string"  onclick="sortpais('tableBtcSort')">姓名</th>
        <th data-type="string" onclick="sortpais('tableBtcSort')">性别</th>
        <th data-type="date" onclick="sortpais('tableBtcSort')">时间</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>7</td>
        <td>aaaa</td>
        <td>男</td>
        <td>2012-12-12</td>
    </tr>
    <tr>
        <td>3</td>
        <td>mmmm</td>
        <td>女</td>
        <td>2013-12-16</td>
    </tr>
    <tr>
        <td>1</td>
        <td>$cccc</td>
        <td>男</td>
        <td>2014-12-12</td>
    </tr>
    <tr>
        <td>4</td>
        <td>ffff</td>
        <td>女</td>
        <td>2015-12-12</td>
    </tr>
    <tr>
        <td>-2</td>
        <td>bbbb</td>
        <td>男</td>
        <td>2016-12-18</td>
    </tr>
    <tr>
        <td>6</td>
        <td>ssss</td>
        <td>女</td>
        <td>2008-10-07</td>
    </tr>
    <tr>
        <td>-5</td>
        <td>tttt</td>
        <td>男</td>
        <td>2012-07-22</td>
    </tr>
    </tbody>
</table>
<script src="sort.js?v=33asss66"></script>
<script type="text/javascript">
// (function(){

</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!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, #tableBtcSort{
        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 ,#tableBtcSort th {
        cursor:pointer;
        background:#eee
    }
    #tableSort tr:nth-child(even) ,#tableBtcSort   tr:nth-child(even){
        background:#f9f9f9
    }
    #tableSort th,#tableSort td , #tableBtcSort th, #tableBtcSort td{
        padding:10px;
        border:1px solid #ccc;
    }

    </style>
</head>

<body>
<table id="tableSort">
    <thead>
    <tr>
        <th data-type="num" onclick="sortpais('tableSort')">百分比</th>
        <th data-type="string" onclick="sortpais('tableSort')">姓名</th>
        <th data-type="date" onclick="sortpais('tableSort')">时间</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>0.4%</td>
        <td>aaaa</td>
        <td>2012-12-12</td>
    </tr>
    <tr>
        <td>-3%</td>
        <td>mmmm</td>
        <td>2013-12-16</td>
    </tr>
    <tr>
        <td>0.44%</td>
        <td>cccc</td>
        <td>2014-12-12</td>
    </tr>
    <tr>
        <td>4%</td>
        <td>ffff</td>
        <td>2015-12-12</td>
    </tr>
    <tr>
        <td>2%</td>
        <td>bbbb</td>
        <td>2016-12-18</td>
    </tr>
    <tr>
        <td>-6.9%</td>
        <td>ssss</td>
        <td>2008-10-07</td>
    </tr>
    <tr>
        <td>5%</td>
        <td>tttt</td>
        <td>2012-07-22</td>
    </tr>
    </tbody>
</table>

<table id="tableBtcSort">
    <thead>
    <tr>
        <th data-type="num" onclick="sortpais('tableBtcSort')">工号</th>
        <th data-type="string"  onclick="sortpais('tableBtcSort')">姓名</th>
        <th data-type="string" onclick="sortpais('tableBtcSort')">性别</th>
        <th data-type="date" onclick="sortpais('tableBtcSort')">时间</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>7</td>
        <td>aaaa</td>
        <td>男</td>
        <td>2012-12-12</td>
    </tr>
    <tr>
        <td>3</td>
        <td>mmmm</td>
        <td>女</td>
        <td>2013-12-16</td>
    </tr>
    <tr>
        <td>1</td>
        <td>$cccc</td>
        <td>男</td>
        <td>2014-12-12</td>
    </tr>
    <tr>
        <td>4</td>
        <td>ffff</td>
        <td>女</td>
        <td>2015-12-12</td>
    </tr>
    <tr>
        <td>-2</td>
        <td>bbbb</td>
        <td>男</td>
        <td>2016-12-18</td>
    </tr>
    <tr>
        <td>6</td>
        <td>ssss</td>
        <td>女</td>
        <td>2008-10-07</td>
    </tr>
    <tr>
        <td>-5</td>
        <td>tttt</td>
        <td>男</td>
        <td>2012-07-22</td>
    </tr>
    </tbody>
</table>
<script src="sort.js?v=33asss66"></script>
<script type="text/javascript">
// (function(){



</script>
</body>
</html>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
    function sortpais(tableId){
        var tbody = document.querySelector('#'+tableId).tBodies[0];
        var th = document.querySelector('#'+tableId).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,td,tbody);
                this.flag = -this.flag;
            };
        };
    }

    function sort(str,flag,n,td,tbody){
        var arr = [];
        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':
                if (a.indexOf('%')>0) {
                    a=a.replace("%","");
                }
                 if (b.indexOf('%')>0) {
                    b=b.replace("%","");
                } 
                return a-b;
                break;
            case 'string':
                return a.localeCompare(b);
                break;
            default:
                return new Date(a.split('-').join('/')).getTime()-new Date(b.split('-').join('/')).getTime();
        };
    };