在功能上实现了对表格不同内容的升序和降序的排序，内容可能是字符串，int类型，日期类型，float类型等。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>对单列表格进行排序</title>
<meta name="generator" content="Studio 3 http://aptana.com/">
<meta name="author" content="Administrator">
<script type="text/javascript" src="js/test3.js"></script>
</head>
<body>
<table border="1" id="tblsort">
<thead>
<tr>
<th onclick="table.sortTable('tblsort',0)" style="cursor: pointer">Last Name</th>
<th onclick="table.sortTable('tblsort',1)" style="cursor: pointer">First Name</th>
<th onclick="table.sortTable('tblsort',2,'int')" style="cursor: pointer">Age</th>
<th onclick="table.sortTable('tblsort',3,'date')" style="cursor: pointer">Birth Day</th>
<th onclick="table.sortTable('tblsort',4,'float')" style="cursor: pointer">Pay</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adam</td>
<td>Jack</td>
<td>26</td>
<td>1/12/1977</td>
<td>3000.12</td>
</tr>
<tr>
<td>Smith</td>
<td>Lucy</td>
<td>28</td>
<td>6/12/1975</td>
<td>4000.23</td>
</tr>
<tr>
<td>Johnson</td>
<td>Lily</td>
<td>35</td>
<td>07/12/1965</td>
<td>5000.03</td>
</tr>
<tr>
<td>Williams</td>
<td>Pual</td>
<td>25</td>
<td>12/08/1984</td>
<td>5000.56</td>
</tr>
<tr>
<td>Gilliam</td>
<td>Jack</td>
<td>45</td>
<td>6/4/1953</td>
<td>10000</td>
</tr>
<tr>
<td>Bill</td>
<td>Hamson</td>
<td>36</td>
<td>9/8/1971</td>
<td>8000</td>
</tr>
<tr>
<td>Mowen</td>
<td>Alex</td>
<td>10</td>
<td>11/12/2000</td>
<td>6000</td>
</tr>
</tbody>
</table>
</body>
</html>
/**
* @author Administrator
*/
table = {
compareTRS : function (otr1, otr2) {
var value1 = otr1.cells[0].firstChild.nodeValue;
var value2 = otr2.cells[0].firstChild.nodeValue;
return value1.localeCompare(value2);
},
sortTable : function (tableId,col,datatype) {
var otable = document.getElementById(tableId);
var tbody = otable.tBodies[0];
var colDataRows = tbody.rows;
var trs = [];
for (var i=0; i < colDataRows.length; i++) {
trs.push(colDataRows[i]);
};
if (otable.sortCol == col) {
trs.reverse();
} else {
trs.sort(table.generateCompareTRS(col, datatype));
}
var fragment = document.createDocumentFragment();
for (var i=0; i < trs.length; i++) {
fragment.appendChild(trs[i]);
};
tbody.appendChild(fragment);
otable.sortCol = col;
},
generateCompareTRS : function (col, datatype) {
return function compareTRS (tr1, tr2) {
var value1 = table.convert(tr1.cells[col].firstChild.nodeValue, datatype);
var value2 = table.convert(tr2.cells[col].firstChild.nodeValue, datatype);
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
},
convert : function (value, datatype) {
switch(datatype) {
case "int":
return parseInt(value);
case "float":
return parseFloat(value);
case "date":
return new Date(Date.parse(value));
default:
return value.toString();
}
}
}
注意这个方法的使用，用到了javascript闭包的技术。
generateCompareTRS : function (col, datatype) {
return function compareTRS (tr1, tr2) {
var value1 = table.convert(tr1.cells[col].firstChild.nodeValue, datatype);
var value2 = table.convert(tr2.cells[col].firstChild.nodeValue, datatype);
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
}
分享到：
相关推荐
使用JavaScript实现表格排序，点击表头切换升序降序，非常简单
分享一款原生js table表格自动排序效果，个人感觉很好用
使用javascript在客户端对表格进行排序的例子
功能强大的javascript表格排序，可以设定排序规则，设定哪些列排序，哪些列不排序。运行速度快。两部操作就搞定，使用方便简单！解决服务器端数据库排序的压力！
绝对是好东西 如果你刚好找这方面的资料要实现点击表头就产生排序，绝对实用,物超所值 轻量级JavaScript表格内容排序代码 对生产的html进行排序，不需要与数据库交互，速度性能好
各种各样的js表格排序列子，只要修改一下参数就可以用了。
程序的实现的是在客户端对表格进行排序，有以下特点： 1.自定义排序列、排序属性（例如innerHTML）、排序数据类型（包括int、float、date、string）、排序顺序（顺序和倒序）； 2.自定义排序函数； 3.可同时设置...
主要介绍了javascript实现Table排序的方法,涉及javascript针对表格对象的获取与排序相关技巧,需要的朋友可以参考下
内涵表格排序代码, 支持string number， 不支持date类型。
表格排序 是Javascript实现, 就目前我看，是最好的排序实现。 可以排序：数字，日期，字母。 只需要两句话实现多种排序功能。 <script type="text/javascript"> var sorter=new table.sorter("tableId"); sorter....
用于b/s前端表格数据排序的方法,使用javascript 操作table,可以选择对表格中任一部分进行排序的说
本文实例讲述了javascript操作表格排序的方法。分享给大家供大家参考。具体如下： 完整例子如下： <html> <head> <title>Table Sort Example</title> [removed] //转换器，将列的字段...
本文实例讲述了JavaScript实现表格点击排序的方法。...表格排序</title> </head> <STYLE type=text/css>TABLE { BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #000000 2px so
这次的例子，只是把Nicholas C .Zakas的例子理解了一下，代码是在学习表格排序时的Demo. 单个数据类型的排序比较简单，他这个例子的特别之处在于能兼容多种数据类型的排序。例子 很简单，但 排序的主方法，有三个...
内容索引:脚本资源,Ajax/JavaScript,表格排序,表头 JavaScript表格排序，点击表头即可排序，此脚本支持中文汉字排序、中英文混合排序、数据大小排序、文件名称类型排序、日期排序、价格排序、中文和数字排序;...
smart-table是一款简单实用的带排序和过滤功能的jQuery表格插件。该jQuery表格插件通过简单的设置就可以生成表格排序、表格字段过滤功能，甚至可以实现表格分页显示，使用非常方便。
参照： <script type="text/javascript" src="../table_.js"> <script type="text/javascript"> temps=new table_("表id",表头不参与排序的行数,表尾不参与排序的行数) </script>
用于Adobe Indesign的脚本。开发语言为Javascript。功能为可用于表格的拼音比划排序。可按照某行或某列进行整个Table的排序。
内容索引:脚本资源,Ajax/JavaScript,表格拖动,表格排序 利用JavaScript实现对表格列的排序，并可以用鼠标拖动列宽，以显示出被遮挡的内容，源代码用到两个JS代码类，可移植操作，重用率高。
Blue Table，Js表格排序插件，排序完成之后需要执行的函数 可以收到一个对象作为参数，前一次排序的对象排序列坐标和当前被排序列坐标。