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 相关文章推荐
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
Node.js返回JSONP详解
May 18 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
vue.js+element 默认提示中英文操作
Nov 11 Javascript
JavaScript中reduce()的用法
May 11 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
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
Python开发编码规范
2006/09/08 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
python Django批量导入数据
2016/03/25 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
python @classmethod 的使用场合详解
2019/08/23 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
python空元组在all中返回结果详解
2020/12/15 Python
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
环保倡议书
2014/04/14 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL