这篇文章主要介绍了利用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>
效果图：
按时间排序（其他效果大家可以自己在本地预览）：
