概述
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>
<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>js
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();
};
};
最后
以上就是害怕冬瓜为你收集整理的JS实现点击表头表格自动排序（含数字、字符串、日期）的全部内容，希望文章能够帮你解决JS实现点击表头表格自动排序（含数字、字符串、日期）所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复