这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序,其中包含数字排序、字符串排序以及日期格式的排序,文中给出了完整的示例代码,并做了注释,相信大家都能看懂,感兴趣的朋友们一起来看看吧。
DOCTYPE>
JS实现点击表头表格自动排序(含数字、字符串、日期)
#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;
}
ID
姓名
性别
时间
07
zzzz
男
2012-12-12
03
yyyy
女
2013-12-16
01
hhhh
男
2014-12-12
04
wwww
女
2018-01-12
02
dddd
男
2016-12-18
06
ssss
女
2018-03-16
05
tttt
男
2017-07-22
;
(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 |