JS实现点击表头表格⾃动排序（含数字、字符串、⽇期）
这篇⽂章主要介绍了利⽤JS如何实现点击表头后表格⾃动排序，其中包含数字排序、字符串排序以及⽇期格式的排序，⽂中给出了完整的⽰例代码，并做了注释，相信⼤家都能看懂，感兴趣的朋友们⼀起来看看吧。
<!DOCTYPE>
<html xmlns="/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').ws[0].cells;
var td = ws;
for(var i = 0; i < th.length; i++) {
th[i].flag = 1;
th[i].onclick = function() {
Attribute('data-type'), this.flag, llIndex);
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>
效果图：
按时间排序（其他效果⼤家可以⾃⼰在本地预览）：
转载于：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。