以前学习js，没有意识到原来可以通过操作dom来对html表格进行排序。简单看了下书,关键是数组的一个sort方法传入一个自定义的比较函数，这个有点类似java的Collections.sort方法，然后自己实现一个简单的点击表头字段实现对应列的排序功能。
index.jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="tableSort.js"></script>
<title>Insert title here</title>
</head>
<body onload="TableUtils.sort('sort-table')">
<table id="sort-table" >
<thead>
<tr>
<th dataType="string">学号</th>
<th dataType="string">姓名</th>
<th dataType="number">年龄</th>
<th dataType="date">出生日期</th>
<th dataType="other">详细信息</th>
</tr>
</thead>
<tbody>
<tr>
<td>31130601</td>
<td>张三</td>
<td>22</td>
<td>1991-03-03</td>
<td><a href="#">button</a></td>
</tr>
<tr>
<td>31130612</td>
<td>李四</td>
<td>24</td>
<td>1989-04-12</td>
<td><a href="#">button</a></td>
</tr>
<tr>
<td>31130623</td>
<td>王五</td>
<td>21</td>
<td>1992-04-13</td>
<td><a href="#">button</a></td>
</tr>
<tr>
<td>31130601</td>
<td>钱六</td>
<td>18</td>
<td>1995-12-01</td>
<td><a href="#">button</a></td>
</tr>
</tbody>
</table>
</body>
</html>
页面比较简单，对于id为sort-table的table在onload事件中注册排序的功能。
核心的js如下：
var TableUtils = new Object();
TableUtils.sort = function(id){
var tb = document.getElementById(id);
//获取表头字段
var ths = tb.tHead.children[0].children;
//循环表头对每一列根据字段类型分别注册排序功能
for(var x in ths){
ths[x].style.cursor = 'pointer';
//默认为顺序排列
ths[x].setAttribute("order","ASC");
ths[x].onclick = function(e){
var t = 0;
//获取指定的列对象的序号
for(var i in ths){
if(ths[i].innerHTML == e.target.innerHTML){
t = i;
}
}
var trs = tb.tBodies[0].rows;
var arr = new Array();
//将指定列的所有单元格放入数组中
for(var i=0;i<=trs.length-1;i++){
arr.push(trs[i].cells[t]);
}
//获取字段类型，根据字段类型指定比较方法
var dataType = e.target.getAttribute("dataType");
if(dataType == "string"){
arr.sort(TableUtils.compareString);
}else if(dataType == "number"){
arr.sort(TableUtils.compareNumber);
}else if(dataType == "date"){
arr.sort(TableUtils.compareDate);
}
//获取排序的方式顺序或者降序
var order = e.target.getAttribute("order");
if(order == "ASC"){
//降序则通过reverse方法倒置结果
arr.reverse();
e.target.setAttribute("order","DESC");
}else{
e.target.setAttribute("order","ASC");
}
//创建dom节点集插入到tbody中完成排序
var frag = document.createDocumentFragment();
for(var i=0;i<=arr.length-1;i++){
//插入所有tr节点
frag.appendChild(arr[i].parentNode);
}
tb.tBodies[0].appendChild(frag);
};
if(x>=(ths.length-1)) break;
}
};
TableUtils.compareString = function(p1,p2){
var pV1 = p1.firstChild.nodeValue;
var pV2 = p2.firstChild.nodeValue;
return pV1.localeCompare(pV2);
};
TableUtils.compareNumber = function(p1,p2){
var pV1 = p1.firstChild.nodeValue;
var pV2 = p2.firstChild.nodeValue;
if(pV1 > pV2){
return 1;
}else if(pV1 == pV2){
return 0;
}else{
return -1;
}
};
TableUtils.compareDate = function(p1,p2){
var pV1 = p1.firstChild.nodeValue;
var pV2 = p2.firstChild.nodeValue;
var ymd1 = pV1.split("-");
var ymd2 = pV2.split("-");
if(ymd1[0] > ymd2[0] || (ymd1[0] == ymd2[0] && ymd1[1] > ymd2[1])
|| (ymd1[0] == ymd2[0] && ymd1[1] == ymd2[1] && ymd1[2] > ymd2[2])){
return 1;
}else if(ymd1[0] == ymd2[0] && ymd1[1] == ymd2[1] && ymd1[2] == ymd2[2]){
return 0;
}else{
return -1;
}
return -1;
};
具体代码实现，见注释。这样即使在加一列，只要指定了dataType（string,number或者date类型）就可以进行排序了。
下面是书上的例子
<html>
<head>
<title>Table Sort Example</title>
<script type="text/javascript">
function convert(sValue, sDataType) {
switch(sDataType) {
case "int":
return parseInt(sValue);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
default:
return sValue.toString();
}
}
function generateCompareTRs(iCol, sDataType) {
return function compareTRs(oTR1, oTR2) {
var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
if (vValue1 < vValue2) {
return -1;
} else if (vValue1 > vValue2) {
return 1;
} else {
return 0;
}
};
}
function sortTable(sTableID, iCol, sDataType) {
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var aTRs = new Array;
for (var i=0; i < colDataRows.length; i++) {
aTRs[i] = colDataRows[i];
}
if (oTable.sortCol == iCol) {
aTRs.reverse();
} else {
aTRs.sort(generateCompareTRs(iCol, sDataType));
}
var oFragment = document.createDocumentFragment();
for (var i=0; i < aTRs.length; i++) {
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
oTable.sortCol = iCol;
}
</script>
</head>
<body>
<p>Click on the table header to sort in ascending order.</p>
<table border="1" id="tblSort">
<thead>
<tr>
<th onclick="sortTable('tblSort', 0)"
style="cursor:pointer">Last Name</th>
<th onclick="sortTable('tblSort', 1)"
style="cursor:pointer">First Name</th>
<th onclick="sortTable('tblSort', 2, 'date')"
style="cursor:pointer">Birthday</th>
<th onclick="sortTable('tblSort', 3, 'int')"
style="cursor:pointer">Siblings</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>7/12/1978</td>
<td>2</td>
</tr>
<tr>
<td>Johnson</td>
<td>Betty</td>
<td>10/15/1977</td>
<td>4</td>
</tr>
<tr>
<td>Henderson</td>
<td>Nathan</td>
<td>2/25/1949</td>
<td>1</td>
</tr>
<tr>
<td>Williams</td>
<td>James</td>
<td>7/8/1980</td>
<td>4</td>
</tr>
<tr>
<td>Gilliam</td>
<td>Michael</td>
<td>7/22/1949</td>
<td>1</td>
</tr>
<tr>
<td>Walker</td>
<td>Matthew</td>
<td>1/14/2000</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
个人感觉把事件监听也封装到js里比较好，便于扩展，而且也减少html的代码毕竟html是主要负责做展现的不应有太多的逻辑事件处理。
相关推荐
NULL 博文链接：https://shaw-n-lu.iteye.com/blog/1881210
Function类 定义 Function类可以表示开发者定义的任何函数，用Function类直接创建函数的语法如下： var function_name=new Function(agrument1,agrument2,…,argumentN,function_body); 每个argument都是一个参数，...
l ECMAScript,有ECMA-262定义，明确javascript这门语言的规则和约定，好比为开始一场游戏指定的游戏规则、规范、约定。 l DOM:提供访问和操作网页内容的方法和接口 l BOM,提供与浏览器交互的方法和接口 ...（4）导航和
内置对象 定义：由ECMAScript实现提供的、独立于宿主环境的所有对象，在ECMAScript程序开始执行时出现。 由定义可知开发者不必明确实例化内置对象，它已被实例化了。在ECMAScript-262只定义了两个内置对象，即Global...
要注意的是在JavaScript中月份的值是从0到11(0表示1月)。 设置日期和时间值 设置日期和时间值有两种方法： 1、只声明距离1970年1月1日凌晨12点的毫秒数 a、直接用距离1970年1月1日凌晨12点的毫秒数 var d=new Date...
创建Array对象 代码如下: //one var aValues=new Array(); //two var aValues=new Array(20); //three var aColors=new Array(); aColors[0]=”red”; aColors[1]=”green”; aColors[2]=”blue”;...
JavaScript高级程序设计(第三版) You don't know JS 系列 ES6 标准入门 Node.JS深入浅出 图解HTTP HTTP权威指南 Head First Java CSS3揭秘 Linux Command Line 大型网站技术架构核心原理与案例分析 锋利的jQuery ...
最近看JavaScript高级程序设计，大有收获，接下来几天写一下读书笔记。之前写了一篇Ajax初步理解的随笔，里面有个函数用来创建XmlHttpRequest对象,浏览器兼容性原因，写出的代码通过大量if判断或者try，catch语句将...
由于才疏学浅，我不得不将《Javascript 高级程序设计》中的部分内容摘抄过来，这些同时也算是我的读书笔记吧。由于 Javascript 面向对象机制及其的重要，而且内容非常的繁多，在这里就分篇章逐个介绍。 使用对象首先...
JavaScript深入理解系列读书笔记系列这部分只会记载一些笔记，不会深入解读电子书链接：提取码：wube《你不知道JavaScript》中册《JavaScript高级程序设计》数据结构栈队列链表哈希表树图浏览器部分浏览器的主要进程...
《JavaScript高级程序设计(第3版)》 学习JS和前端必读的书籍，比较厚但是很有干货涉及面比较广，里面的重要章节我自己是读了不止一遍。 2、 《ES6标准入门》 阮一峰编着，作者讲事情的思路一向比较清晰，也是学ES6...
Essential .NET 读书笔记 [第一部分] NET FrameWork的Collections支持 .NET的反射在软件设计上的应用 关于跨程序集的反射 实现C#和VB.net之间的相互转换 深入剖析ASP.NET组件设计]一书第三章关于ASP.NET运行原理讲述...