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 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
浅谈javascript的闭包
Jan 23 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 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扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
获取URL文件名后缀
2013/10/24 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
django加载本地html的方法
2018/05/27 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
python ETL工具 pyetl
2020/06/07 Python
美国购车网站:TrueCar
2016/10/19 全球购物
如何整合JQuery和Prototype
2014/01/31 面试题
初入社会应届生求职信
2013/11/18 职场文书
总经理助理职责
2014/02/04 职场文书
车辆转让协议书
2014/04/15 职场文书
测控技术自荐信
2014/06/05 职场文书
生产操作工岗位职责
2014/09/16 职场文书
公司委托书格式范文
2014/10/09 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
总经理致辞
2015/07/29 职场文书
售房协议书范本
2015/08/11 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
MongoDB数据库之添删改查
2022/04/26 MongoDB