JS实现点击表头表格自动排序(含数字、字符串、日期)-成都快上网建站

JS实现点击表头表格自动排序(含数字、字符串、日期)

效果图如下:

公司专注于为企业提供做网站、网站设计、微信公众号开发、成都做商城网站,微信小程序开发,软件按需求定制制作等一站式互联网企业服务。凭借多年丰富的经验,我们会仔细了解各客户的需求而做出多方面的分析、设计、整合,为客户设计出具风格及创意性的商业解决方案,创新互联建站更提供一系列网站制作和网站推广的服务。

JS实现点击表头表格自动排序(含数字、字符串、日期)

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实现点击表头表格自动排序(含数字、字符串、日期)
标题URL:http://kswjz.com/article/pjjjpc.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流