JS实现点击表头表格自动排序（含数字、字符串、日期）
作者：daisy 时间：2024-05-02 16:16:53
效果图如下：
Demo演示地址：点击这里
主要的JS代码如下：
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();
};
};
完整实例代码
<!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">工号</th>
<th data-type="string">姓名</th>
<th data-type="string">性别</th>
<th data-type="date">时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>07</td>
<td>aaaa</td>
<td>男</td>
<td>2012-12-12</td>
</tr>
<tr>
<td>03</td>
<td>mmmm</td>
<td>女</td>
<td>2013-12-16</td>
</tr>
<tr>
<td>01</td>
<td>cccc</td>
<td>男</td>
<td>2014-12-12</td>
</tr>
<tr>
<td>04</td>
<td>ffff</td>
<td>女</td>
<td>2015-12-12</td>
</tr>
<tr>
<td>02</td>
<td>bbbb</td>
<td>男</td>
<td>2016-12-18</td>
</tr>
<tr>
<td>06</td>
<td>ssss</td>
<td>女</td>
<td>2008-10-07</td>
</tr>
<tr>
<td>05</td>
<td>tttt</td>
<td>男</td>
<td>2012-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 = [];
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:
return new Date(a.split('-').join('/')).getTime()-new Date(b.split('-').join('/')).getTime();
};
};
})();
</script>
</body>
</html>
总结
标签：js,表格,排序
0
投稿猜你喜欢
Vue插槽slot详细介绍(对比版本变化,避免踩坑)
2024-05-13 09:13:39
js注入 黑客之路必备！
2024-04-17 10:23:44
python交易记录整合交易类详解
2022-09-15 20:18:37
Vscode ChatGPT插件使用(无需代理注册)
2023-05-13 18:25:01
Oracle中sys和system的区别小结
2009-11-10 20:36:00
红黑树的插入详解及Javascript实现方法示例
2024-04-19 11:03:13
selenium + python 获取table数据的示例讲解
2021-02-20 11:57:46
Python+OpenCV之形态学操作详解
2021-11-24 23:37:58
ASP 自动采集实现代码
2011-03-07 11:17:00
python正则表达式最详解
2022-03-13 07:29:47
Python获取昨天、今天、明天开始、结束时间戳的方法
2022-08-23 18:23:40
ElementUI嵌套页面及关联增删查改实现示例
2023-07-02 16:54:45
Python中设置变量作为默认值时容易遇到的错误
2023-09-14 09:32:00
sklearn+python:线性回归案例
2023-10-19 20:07:01
opencv实现图片模糊和锐化操作
2023-11-28 18:11:14
go中的unsafe包及使用详解
2023-10-13 17:07:27
改善IE6中a与a:hover的背景支持
2009-11-27 18:50:00
原创一个AJAX类
2008-07-24 13:29:00
JavaScript数据结构中串的表示与应用实例
2023-08-26 10:38:38
go实现脚本解释器gscript
2023-10-12 00:49:39
