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>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
-
问题内容： 我有一个日期字符串的任意列表（mm-yyyy），如下所示： 我需要此列表首先按年（升序）级别排序，然后按月（升序）级别排序..以便逻辑顺序可以是： 我该如何实现？ 问题答案： 尝试这个：
-
问题内容： 我有一个带有文件名的字符串列表： 输出： 但是我想要： 有没有简单的方法可以做到这一点？ 问题答案： 是： 说明：字符串按词法排序，因此在字符串之前（因为< ，因此忽略第一个字符串之后的内容）。因此，我们使用的参数是一个回调函数，该函数接受一个列表项并返回用于对该项目进行排序的值- 在您的情况下，是从文件名的第一部分构建的整数。这样，列表就可以正确地按数值排序。
-
本文向大家介绍js表头排序实现方法，包括了js表头排序实现方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js表头排序实现方法。分享给大家供大家参考。 具体实现方法如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍JavaScript实现表格点击排序的方法，包括了JavaScript实现表格点击排序的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript实现表格点击排序的方法。分享给大家供大家参考。具体分析如下： 这里实现基于JS的表格点击排序效果，可以根据表格内的数据大小自动按顺序排列，股票网站常会见到这种功能。 希望本文所述对大家的javascript程序设计有所
-
我有一个程序，它接受一个单词和一个文本文件字典，并在字典中搜索与给定单词相等的单词组合（是字母表）。 我最后得到了一个字符串数组的Arraylist，每个数组都是一个包含它所使用的单词的解决方案，Arraylist是所有的解决方案。 它首先按字长（降序）排序,然后对等长字使用字母排序。 我现在对各个数组进行了排序，但我正试图按照某些规则在arraylist中对它们进行排序： 按字数递增 对于包含相
-
本文向大家介绍java String[]字符串数组自动排序的简单实现，包括了java String[]字符串数组自动排序的简单实现的使用技巧和注意事项，需要的朋友参考一下 如下所示： 打印结果：(数字、大写、小写，安装ACS码值进行排序) 以上这篇java String[]字符串数组自动排序的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。