JS实现点击表头表格自动排序(含数字、字符串、日期)
来源:互联网 发布:双色球内部数据 编辑:程序博客网 时间:2024/05/16 07:02
<!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>
0 0
- JS实现点击表头表格自动排序(含数字、字符串、日期)
- js-点击表格自动排序
- 鼠标点击html表格表头实现表格数据自定义排序
- 点击表头自动排序
- LigerUI之grid表格点击表头标题排序实现
- 点击表头实现排序
- 点击表头自动排序 java
- jQuery数据表格(点击表头排序,有点问题)
- js 点击表头进行排序
- Js-点击表头进行排序
- web中table表格点击表头排序
- AJAX 表格字段数据排序,点击表头每列排序
- 点击表头排序(ASP)
- jquery实现报表点击表头排序
- bootstrap点击表头实现排序功能
- 点击表头排序的几种方法 & 动态表格
- java前端easyui中datagrid表格点击表头排序
- JS实现表格排序
- ElasticSearch 5.3——单台服务器多节点
- CString,string,char*数据类型之间的转换
- C# static静态变量用法
- 使用脚本工具批量打包游戏资源
- 如何让service死不掉
- JS实现点击表头表格自动排序(含数字、字符串、日期)
- ZOJ 3949 (树形DP)
- DataBase: Oracle语法命令与Sql Server的几个不同总结
- 设置GPIO的上下拉电阻
- LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
- Tornado相关
- 搭建Apache James服务器用JAVA发送邮件
- 手机office办公——微软推出安卓手机端Office Mobile应用
- AndroidStudio JNI NDK CMake