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


Posted in Javascript onJanuary 22, 2017

效果图如下:

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();
  };
};

完整实例代码

<!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>

总结

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

Javascript 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
五种js判断是否为整数类型方式
Dec 03 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 #Javascript
利用JS实现文字的聚合动画效果
Jan 22 #Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 #Javascript
jQuery实现的分页功能示例
Jan 22 #Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 #Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 #Javascript
前端开发必知的15个jQuery小技巧
Jan 22 #Javascript
You might like
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
javascript 节点排序 2
2011/01/31 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
python从入门到精通(DAY 3)
2015/12/20 Python
详解Python验证码识别
2016/01/25 Python
Python多线程爬虫简单示例
2016/03/04 Python
Python对象转JSON字符串的方法
2016/04/27 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Python简单I/O操作示例
2019/03/18 Python
python如何处理程序无法打开
2020/06/16 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
2019年.net常见面试问题
2012/02/12 面试题
岗位职责说明书模板
2014/07/30 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
2014年销售工作总结
2014/12/01 职场文书
医院科室评语
2015/01/04 职场文书
工程款申请报告
2015/05/15 职场文书
python unittest单元测试的步骤分析
2021/08/02 Python
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
python中的random模块和相关函数详解
2022/04/22 Python