以前学习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是主要负责做展现的不应有太多的逻辑事件处理。
相关推荐
《JavaScript高级程序设计》是JavaScript开发者的经典教材，它深入探讨了这门语言的核心概念和技术。这篇读书笔记主要聚焦在第三部分，这部分通常涵盖了更高级的主题，如对象、原型、闭包以及模块化等。结合提供的...
JavaScript中的Function类是一种特殊的数据类型，它可以用来动态创建或表示任何开发者定义的函数。通过`new Function()`构造函数，我们可以传递参数列表和函数体来创建一个新的函数。例如，`var sayHi = new ...
### JavaScript高级程序设计读书笔记之九：本地对象Array #### 创建Array对象 在JavaScript中，`Array`是一种非常重要的本地对象，主要用于存储一系列有序的数据。创建`Array`对象的方法有多种，具体包括： 1. **...
JavaScript，作为一种广泛应用于Web开发的脚本语言，其核心规则和规范由ECMAScript标准定义。ECMA-262是这个标准的正式名称，它详细规定了JavaScript的语法、类型、关键字、保留字、操作符以及对象。ECMAScript为...
在JavaScript中，内置对象是指由ECMAScript标准实现并提供的一类特殊对象，它们独立于宿主环境（例如浏览器或Node.js环境）存在，并在程序执行时自动创建。这些对象提供了许多基本功能和常用方法，使得开发者可以...
### JavaScript中的Date对象详解 #### 一、概述 在JavaScript编程语言中，`Date`对象是一种内置对象，用于处理日期和时间数据。它提供了一系列的方法和属性，可以帮助开发者轻松地进行日期时间的操作，如获取当前...
### 基于Springboot的学生读书笔记共享系统关键知识点解析 #### 一、项目背景与目标 本系统旨在为学生提供一个便捷、高效的读书笔记共享平台。随着互联网技术的发展，尤其是移动互联网的普及，学生群体对于知识...
微信小程序全栈开发技术与实战读书笔记模板 微信小程序全栈开发技术与实战是目前非常热门的开发技术之一，本书共16章，主要包括快速上手、基础组件、设计交互、高级组件、数据访问与管理、分层架构、服务逻辑层实现...
这里的"HeaderFirst读书笔记代码.zip"是一个包含作者阅读此书时所编写的源码和笔记的压缩文件，可以帮助读者更直观地理解和学习书中内容。 根据提供的压缩包文件名，我们可以推测这是一系列按照章节顺序排列的HTML...
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 是一种高级的脚本语言，主要用于网页的交互性和动态效果的实现。JavaScript 可以用来创建动态网页，实现网页的交互性和动态效果。 网页设计 网页设计是 Web 开发的重要部分，网页设计的目的是创建一个...