js实现td排序及分组分类
如题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.tbl-list, .tbl-list td, .tbl-list th {
border: solid 1px #000;
border-collapse: collapse;
padding: 10px;
margin: 15px;
}
</style>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<title>table sort</title>
<script type="text/javascript">
//排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型
function sortAble(th, tableId, iCol, dataType) { var ascChar = "▲";
var descChar = "▼"; var table = document.getElementById(tableId); //排序标题加背景色
for (var t = 0; t < table.tHead.rows[0].cells.length; t++) {
var th = $(table.tHead.rows[0].cells[t]);
var thText = th.html().replace(ascChar, "").replace(descChar, "");
if (t == iCol) {
th.css("background-color", "#ccc");
}
else {
th.css("background-color", "#fff");
th.html(thText);
} } var tbody = table.tBodies[0];
var colRows = tbody.rows;
var aTrs = new Array; //将得到的行放入数组，备用
for (var i = 0; i < colRows.length; i++) {
//注：如果要求“分组明细不参与排序”，把下面的注释去掉即可
//if ($(colRows[i]).attr("group") != undefined) {
aTrs.push(colRows[i]);
//}
} //判断上一次排列的列和现在需要排列的是否同一个。
var thCol = $(table.tHead.rows[0].cells[iCol]);
if (table.sortCol == iCol) {
aTrs.reverse();
} else {
//如果不是同一列，使用数组的sort方法，传进排序函数
aTrs.sort(compareEle(iCol, dataType));
} var oFragment = document.createDocumentFragment();
for (var i = 0; i < aTrs.length; i++) {
oFragment.appendChild(aTrs[i]);
}
tbody.appendChild(oFragment); //记录最后一次排序的列索引
table.sortCol = iCol; //给排序标题加“升序、降序” 小图标显示
var th = $(table.tHead.rows[0].cells[iCol]);
if (th.html().indexOf(ascChar) == -1 && th.html().indexOf(descChar) == -1) {
th.html(th.html() + ascChar);
}
else if (th.html().indexOf(ascChar) != -1) {
th.html(th.html().replace(ascChar, descChar));
}
else if (th.html().indexOf(descChar) != -1) {
th.html(th.html().replace(descChar, ascChar));
} //重新整理分组
var subRows = $("#" + tableId + " tr[parent]");
for (var t = subRows.length - 1; t >= 0 ; t--) {
var parent = $("#" + tableId + " tr[group='" + $(subRows[t]).attr("parent") + "']");
parent.after($(subRows[t]));
}
} //将列的类型转化成相应的可以排列的数据类型
function convert(sValue, dataType) {
switch (dataType) {
case "int":
return parseInt(sValue, 10);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
case "string":
default:
return sValue.toString();
}
} //排序函数，iCol表示列索引，dataType表示该列的数据类型
function compareEle(iCol, dataType) {
return function (oTR1, oTR2) { var vValue1 = convert(removeHtmlTag($(oTR1.cells[iCol]).html()), dataType);
var vValue2 = convert(removeHtmlTag($(oTR2.cells[iCol]).html()), dataType);
if (vValue1 < vValue2) {
return -1;
}
else {
return 1;
} };
} //去掉html标签
function removeHtmlTag(html) {
return html.replace(/<[^>]+>/g, "");
} //jQuery加载完以后，分组行高亮背景，分组明细隐藏
$(document).ready(function () {
$("tr[group]").css("background-color", "#ff9");
$("tr[parent]").hide();
}); //点击分组行时，切换分组明细的显示/隐藏
function showSub(a) {
var groupValue = $(a).parent().parent().attr("group");
var subDetails = $("tr[parent='" + groupValue + "']");
subDetails.toggle();
} </script>
</head> <body> <table id="tableId" class="tbl-list" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
<thead>
<tr>
<th>序号</th>
<th width="100px" onclick="sortAble(this,'tableId', 1,'string')"
style="cursor:pointer">姓名</th>
<th width="200px" onclick="sortAble(this,'tableId', 2, 'date')"
style="cursor:pointer">生日</th>
<th width="100px" onclick="sortAble(this,'tableId', 3, 'int')"
style="cursor:pointer">年龄</th>
<th width="100px" onclick="sortAble(this,'tableId', 4, 'float')"
style="cursor:pointer">工资</th>
</tr>
</thead>
<tbody>
<tr group="A">
<td>1</td>
<td><a href="#" onclick="showSub(this)">Group-A</a></td>
<td>01/12/1982</td>
<td>25</td>
<td>1000.50</td>
</tr>
<tr parent="A">
<td>2</td>
<td>A-01</td>
<td>01/09/1982</td>
<td>25</td>
<td>2000.10</td>
</tr>
<tr parent="A">
<td>3</td>
<td>A-02</td>
<td>01/10/1982</td>
<td>26</td>
<td>2000.20</td>
</tr>
<tr group="B">
<td>4</td>
<td><a href="#" onclick="showSub(this)">Group-B</a></td>
<td>10/14/1999</td>
<td>18</td>
<td>1000.20</td>
</tr>
<tr parent="B">
<td>5</td>
<td>B-01</td>
<td>02/12/1982</td>
<td>19</td>
<td>3000.20</td>
</tr>
<tr parent="B">
<td>6</td>
<td>B-02</td>
<td>03/12/1982</td>
<td>20</td>
<td>3000.30</td>
</tr>
<tr group="C">
<td>7</td>
<td><a href="#" onclick="showSub(this)">Group-C</a></td>
<td>10/14/1980</td>
<td>8</td>
<td>1000.30</td>
</tr>
<tr parent="C">
<td>8</td>
<td>C-01</td>
<td>03/12/1981</td>
<td>17</td>
<td>3100.30</td>
</tr>
</tbody>
</table>
</body>
</html>
js实现td排序及分组分类的更多相关文章
- 案例学习总结：原生JS实现表格排序
最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...
- MySql下实现先排序后分组
最近在工作中遇到一个先排序后分组的需求,发现MySql不同的版本有不同的结果,特此记录. 举例:要求在shop表中查询出各类型商店中价格最高的商品. --表结构-- create table `sho ...
- mysql 怎样先排序再分组
权游游牧族:众所周知!一句SqL语句不能先排序再分组.所以这里给出几个案例 --表结构-- create table `shop` ( `id` int (10) PRIMARY KEY, `shop ...
- MySQL进阶5--分组函数 / 分组排序和分组查询 group by(having) /order by
MySQL进阶--分组排序和分组查询 group by(having) /order by /* 介绍分组函数 功能:用做统计使用,又称为聚合函数或组函数 1.分类: sum, avg 求和 /平均数 ...
- Hadoop学习笔记—11.MapReduce中的排序和分组
一.写在之前的 1.1 回顾Map阶段四大步骤 首先,我们回顾一下在MapReduce中,排序和分组在哪里被执行: 从上图中可以清楚地看出,在Step1.4也就是第四步中,需要对不同分区中的数据进行排 ...
- JS中对象排序
详细代码如下: var s=[{name:"abc",value:10},{name:"dbc",value:5},{name:"acc", ...
- js函数文件排序化
因为本人的某些小强迫症,写了一个格式化并根据js函数名排序的c++程序,此作mark #include <stdio.h> #include <map> #include &l ...
- LINQ简明教程：数据排序、分组、过滤
LINQ可以对很多数据源进行查询操作,比如数据库.数组(array).链表(list).XML文件等.在本文中,我将从数组中提取数据,这些数据是10个最受欢迎的国家.有一个类叫Countries,有c ...
- MySQL的外键，修改表，基本数据类型，表级别操作，其他（条件，通配符，分页，排序，分组，联合，连表操作）
MySQL的外键,修改表,基本数据类型,表级别操作,其他(条件,通配符,分页,排序,分组,联合,连表操作): a.创建2张表 create table userinfo(nid int not nul ...
随机推荐
- 移动app的一些心得
周末的时候闲着没事,看到了个开源的红旅动漫的APP,于是自己就拿下来写了下,整个网站作者也解析成了接口,所以就可以写成app了,作者写的是用mui开发的,可以通过hbuilder软件打开,进行查看源代 ...
- Major and minor numbers
The major nuber is the driver associated with the device, while the minor number is used by the kern ...
- 淘淘商城_day05_课堂笔记
今日大纲 学习Redis 使用Redis完成项目中缓存需求 实现商品详情页功能 缓存的需求 大广告位数据无需每次查询后台系统的接口,可以在前台系统添加缓存,提高访问首页的速度. 商品类目的数据也可以缓 ...
- CentOS启动不显示图形界面直接进入命令行模式
我现在用的是 CentOS 6.3 开机后进入图形化界面还是进入命令行取决于inittab文件中的配置.该文件位于etc目录下. # vi /etc/inittab 找到下面的语句: # Defaul ...
- USACO 2.4 Cow Tours
Cow Tours Farmer John has a number of pastures on his farm. Cow paths connect some pastures with cer ...
- JQ中的clone()方法与DOM中的cloneNode()方法
JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(de ...
- 浅谈MAIC 2016第二届移动应用（APP）创新大会
MAIC 2016第二届移动应用(APP)创新大会将于2016年12月在上海举办!MAIC一届比一届办的有质量,规模越大.今年也如约而至,预计今年MAIC规模逾2000人.大会以专业会议,创新应用展览 ...
- Save Update saveOrUpdate delete
参考:Hibernate Session的saveOrUpdate()方法 saveOrUpdate与Update的作用 Hibernate Delete query Hibernate Basics ...
- chapter11_1 Lua数组、列表
Lua中的table可以表示其他语言提供的数据结构:数组.记录.线性表.队列.集合等. 在Lua中很少编写搜索算法,因为table本身就提供了直接访问任意类型的功能. 数组 使用整数来索引table即 ...
- Openjudge-计算概论（A）-求出e的值
描述: 利用公式e = 1 + 1/1! + 1/2! + 1/3! + ... + 1/n! 求e .输入输入只有一行,该行包含一个整数n(2<=n<=15),表示计算e时累加到1/n! ...