在项目中，经常会碰表格排序，最近整理了一个表格排序包括字符串，日期，整型，浮点型，以及图片等高级排序，将服务器功能转移到前端实现，减轻了服务器压力，功能比较强大。
(function () {
/**
@ Author: Kingwell leng
@ Date : 2012-8-22
@ Blog : http://kingwell-leng.iteye.com/
@ Email : jinhua.leng##gmail.com
*/
//创建闭包以及下面的空间命名，避免项目开发中与其它内容有冲突
if (!window.kw) {
window.kw = {};
};
kw = {
convert : function (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();
}
},
geterateCompareTRs : function (iCol, sDataType) { //比较函数，用于sort排序用
return function compareTRs(oTR1, oTR2) {
var vValue1,
vValue2;
if (oTR1.cells[iCol].getAttribute("value")) { //用于高级排序，比如图片，添加一个额外的属性来排序
vValue1 = kw.convert(oTR1.cells[iCol].getAttribute("value"), sDataType);
vValue2 = kw.convert(oTR2.cells[iCol].getAttribute("value"), sDataType);
} else {
vValue1 = kw.convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
vValue2 = kw.convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
}
if (vValue1 < vValue2) {
return -1;
} else if (vValue1 > vValue2) {
return 1;
} else {
return 0;
}
}
},
tabSort : function (sTableID, iCol, sDataType) { //排序函数，sTableID为目标,iCol哪列排序，为必需，sDataType可选
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var aTRs = [];
for (var i = 0; i < colDataRows.length; i++) {
aTRs[i] = colDataRows[i];
};
if (oTable.sortCol == iCol) { //如果已经排序，则倒序
aTRs.reverse();
} else {
aTRs.sort(this.geterateCompareTRs(iCol, sDataType));
}
var oFragment = document.createDocumentFragment();
for (var j = 0; j < aTRs.length; j++) {
oFragment.appendChild(aTRs[j]);
};
oTBody.appendChild(oFragment);
oTable.sortCol = iCol; //设置一个状态
}
};
})();
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<title>kingwell</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html,body{font-family:Arial, Helvetica, sans-serif; font-size:12px}
table{ border-collapse:collapse}
td,th{padding:5px; border:1px solid #CCC; font-weight:lighter;}
th{ cursor:pointer}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table width="400" id="tab">
<thead>
<tr>
<th width="100" onclick="kw.tabSort('tab',0)">First Name</th>
<th width="100" onclick="kw.tabSort('tab',1)">Last Name</th>
<th width="100" onclick="kw.tabSort('tab',2,'date')">Date</th>
<th width="100" onclick="kw.tabSort('tab',3,'int')">Int</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kingwell</td>
<td>Leng</td>
<td>3/10/2012</td>
<td>1</td>
</tr>
<tr>
<td>1aJim</td>
<td>Green</td>
<td>3/5/2012</td>
<td>2</td>
</tr>
<tr>
<td>Kate</td>
<td>Bin</td>
<td>1/2/2012</td>
<td>3</td>
</tr>
<tr>
<td>Zte</td>
<td>Ri</td>
<td>5/3/2012</td>
<td>33</td>
</tr>
<tr>
<td>Bee</td>
<td>Dd</td>
<td>8/1/2012</td>
<td>15</td>
</tr>
</tbody>
</table>
</body>
</html>
为了现实结构，表现，行为相分离的原则，尽量与HTML分离，这里只是为了演示而矣。
分享到：
相关推荐
根据提供的文件内容，我们可以整理出以下Web前端设计基础的知识点： 1. HTML5、CSS3、JavaScript概述 - HTML5是最新版本的超文本标记语言，用于创建网页的标准标记语言。它具有更快的访问速度、更好的搜索引擎优化...
JavaScript是Web前端开发的核心语言之一，它在网页交互、数据处理和动态效果实现等方面发挥着重要作用。本手册将深入探讨JavaScript中的字符串，这是编程中常用的数据类型，对于理解和操作文本至关重要。 一、字符...
基本类型包括整型、浮点型、字符型和布尔型等，而引用类型包括数组、类和接口等。在本章中，我们主要介绍基本类型。 §2.2 常量与变量 在 Java 中，常量是使用关键字 final 声明的，它的值不能被改变。变量是 Java...
Web前端开发是IT行业中至关重要的领域，涉及到网页的构建、用户体验设计以及交互功能的实现。在"1+x 证书 Web 前端开发中级——理论考试（试卷2）"的试题中，我们可以看到一系列关于HTML5、CSS3、JavaScript以及...
### HTML5及CSS3 Web前端开发技术习题答案解析 #### 1. HTML5与HTML4的主要区别及其解决的问题 HTML5与HTML4相比，在Web前端开发领域解决了多个关键问题，主要包括： - **浏览器间的兼容性问题**：早期不同浏览器...
### VB源码——查找特定位置字符串 #### 功能概述 本段VB代码实现了一个功能：在给定的字符串（`instring`）中查找位于指定前缀（`after`）与后缀（`before`）之间的子字符串。该函数允许用户设定是否从字符串的...
Python3编写实用脚本程序——拼接表格单行数据为字符串.zipPython3编写实用脚本程序——拼接表格单行数据为字符串.zipPython3编写实用脚本程序——拼接表格单行数据为字符串.zipPython3编写实用脚本程序——拼接表格...
在这个特定的题目“OJ_整型字符串排序”中，我们面临的是一个关于整型字符串排序的挑战。由于描述中提到只有资源文件而没有入口程序和测试用例，这意味着我们需要自己构建解决问题的算法并编写相应的代码。 整型...
此外，还讲解了数组和字符串的操作方法，正则表达式的应用，以及面向对象的编程基础。在BOM（浏览器对象模型）和DOM（文档对象模型）的章节中，学习了如何通过JavaScript操作浏览器的窗口、历史、位置等对象，以及...
面试题练习题前端 JavaScript高级语法-字符串属性面试题练习题前端 JavaScript高级语法-字符串属性面试题练习题前端 JavaScript高级语法-字符串属性面试题练习题前端 JavaScript高级语法-字符串属性面试题练习题前端...
判断输入的是否是浮点型，自己整理两种方法实现输入内容是否为浮点型数据
微信小程序——首字母排序选择（截图+源码）.zip 微信小程序——首字母排序选择（截图+源码）.zip 微信小程序——首字母排序选择（截图+源码）.zip 微信小程序——首字母排序选择（截图+源码）.zip 微信小程序——首...
在IT领域，字符串排序是一个常见的...在实际应用中，我们还可以探索更高效的排序算法，如快速排序、归并排序等，但基本思路都是类似的：将字符串拆分成可操作的单元，转换为适当的数据类型，排序，然后再转换回字符串。
### C++课程设计案例——字符串操作 #### 一、引言 在计算机科学领域，字符串是极其重要的数据类型之一，广泛应用于各种编程场景之中。在本篇内容中，我们将通过一个具体的C++课程设计案例来深入理解如何进行字符串...
后缀数组可以看作是一系列字符串后缀的排序，其中每个元素都是原字符串的一个后缀，按字典序排列。相比于后缀树，后缀数组在实现上更为简单，同时在时间和空间效率上也有良好的表现。 ### 基本定义 后缀数组是将一...
后缀数组不仅用于字符串的排序，还广泛应用于字符串的匹配、最长公共子串查找等多种字符串操作中。 首先，让我们深入了解后缀数组的基本定义。假设有一个字符串S，其长度为n。后缀数组SA[i]表示的是S的所有后缀中，...