JS实现点击表头表格自动排序（含数字、字符串、日期）

<!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>

JS实现点击表头表格自动排序（含数字、字符串、日期）相关推荐

html自动排序数字,JS实现点击表头表格自动排序（含数字、字符串、日期）
效果图如下: Demo演示地址:点击这里主要的JS代码如下: var tbody = document.querySelector('#tableSort').tBodies[0]; var th ...
java点击表头可进行排序_table中点击表头实现排序的功能示例介绍
表头名字,页面中获取上次点击的表头的名称和这次点击的表头的名称做比较,如果两者相同就按原先相反的顺序排列,否则新列升序排列, 获取排列顺序的列名及排列顺序以后,传到后台获取相应sql,添加order ...
html 表格自动排序,jQuery html表格排序插件tablesorter使用方法详解
tablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载j ...
NetTiers学习笔记09---RADGrid + EntityDataSource设置默认排序, 及表格自动排序,分页的方法...
前段时间虽然解决了排序和分页的问题,但始终没有解决默认排序的问题, 起初一直把焦点放在EntityDataSource的排序默认值上,但始终搞不定, 今天又花了不少时间Google和研究,终于通过设置 ...
C#Datagidview 点击列头自动排序
var c = new DataGridViewColumn(); c.CellTemplate = new DataGridViewTextBoxCell(); c.Name = name; c.H ...
HTML表格自动排序
jquery-tablesort jquery-tablesort下载地址 <!DOCTYPE html> <html> <head><meta charse ...
js实现点击按钮图片自动切换_☆往事随風☆的博客
文章目录前言一.基本思路二.代码分析 1.创建数组保存图片的存储路径 2.获取按钮对象 3.调用定时器 4.关闭定时器三.整体代码四.效果展示前言利用js实现一个图片自动切换的功能. 一 ...
js实现点击按钮使图片排序
效果 1 .点击按钮如果按钮文字是从大到小将li标签按照从大到小的顺序排列文字改成从小到大如果按钮文字是从小到大将li标签按照从小到大的顺序排列文字变成从大到小 2 .点击按钮将li随机 ...
elemet-ui后台表格自动排序解决办法
加上sortable="custom" <el-table-column prop="fdcName" label="组合名称" wi ...

JS实现点击表头表格自动排序（含数字、字符串、日期）

JS实现点击表头表格自动排序（含数字、字符串、日期）相关推荐

最新文章

热门文章