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 相关文章推荐
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
javascript实现点击小图显示大图
Nov 29 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
我的论坛源代码(六)
2006/10/09 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
jquery 插件学习(六)
2012/08/06 Javascript
iframe实用操作锦集
2014/04/22 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python实现的排列组合计算操作示例
2017/10/13 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
python系列 文件操作的代码
2019/10/06 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
化学教学随笔感言
2014/02/19 职场文书
党员创先争优活动总结
2014/05/04 职场文书
品德评语大全
2014/05/05 职场文书
活动总结模板
2014/05/09 职场文书
元旦趣味活动方案
2014/08/22 职场文书
大班上学期个人总结
2015/02/13 职场文书
高一作文之乐趣
2019/11/21 职场文书
MySQL深分页问题解决思路
2022/12/24 MySQL