php 单击表头排序,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();

};

};

})();

总结

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