达州做网站
大橙子网站建设，新征程启航
为企业提供网站建设、域名注册、服务器等服务
JS实现点击表头表格自动排序（含数字、字符串、日期）
效果图如下：
公司专注于为企业提供做网站、网站设计、微信公众号开发、成都做商城网站，微信小程序开发，软件按需求定制制作等一站式互联网企业服务。凭借多年丰富的经验，我们会仔细了解各客户的需求而做出多方面的分析、设计、整合，为客户设计出具风格及创意性的商业解决方案，创新互联建站更提供一系列网站制作和网站推广的服务。
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();
};
};完整实例代码
JS实现点击表头表格自动排序（含数字、字符串、日期）
| 工号 | 姓名 | 性别 | 时间 |
|---|---|---|---|
| 07 | aaaa | 男 | 2012-12-12 |
| 03 | mmmm | 女 | 2013-12-16 |
| 01 | cccc | 男 | 2014-12-12 |
| 04 | ffff | 女 | 2015-12-12 |
| 02 | bbbb | 男 | 2016-12-18 |
| 06 | ssss | 女 | 2008-10-07 |
| 05 | tttt | 男 | 2012-07-22 |
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
网页标题：JS实现点击表头表格自动排序（含数字、字符串、日期）
本文路径：http://dzwzjz.com/article/pjjjpc.html