html自动排序数字,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实现点击表头表格自动排序(含数字、字符串、日期)

#tableSort th{cursor: pointer; background: #eee}

#tableSort tr:nth-child(even){background: #f9f9f9}

#tableSort th,#tableSort td{padding: 10px; border:1px solid #ccc;}

工号姓名性别时间

07aaaa男2012-12-1203mmmm女2013-12-1601cccc男2014-12-1204ffff女2015-12-1202bbbb男2016-12-1806ssss女2008-10-0705tttt男2012-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 < 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();

};

};

})();

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。 ad51e517755f8fd6a7ec83ced4ecfaf3.png

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值