在项目中，经常会碰表格排序，最近整理了一个表格排序包括字符串，日期，整型，浮点型，以及图片等高级排序，将服务器功能转移到前端实现，减轻了服务器压力，功能比较强大。
(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中的字符串，这是编程中常用的数据类型，对于理解和操作文本至关重要。 一、字符...
### VB源码——查找特定位置字符串 #### 功能概述 本段VB代码实现了一个功能：在给定的字符串（`instring`）中查找位于指定前缀（`after`）与后缀（`before`）之间的子字符串。该函数允许用户设定是否从字符串的...
"关于六种排序整型、浮点型、字符型、字符串型随机生成、手动输入"，我们可以理解为作者实现了六种不同的排序算法，分别针对四种基本数据类型：整型（int）、浮点型（float或double）、字符型（char）以及字符串型...
### HTML5及CSS3 Web前端开发技术习题答案解析 #### 1. HTML5与HTML4的主要区别及其解决的问题 HTML5与HTML4相比，在Web前端开发领域解决了多个关键问题，主要包括： - **浏览器间的兼容性问题**：早期不同浏览器...
Python3编写实用脚本程序——拼接表格单行数据为字符串.zipPython3编写实用脚本程序——拼接表格单行数据为字符串.zipPython3编写实用脚本程序——拼接表格单行数据为字符串.zipPython3编写实用脚本程序——拼接表格...
本文介绍了在JavaScript中对字符串数组进行排序的方法，包括基础的`sort()`方法以及更高级的排序算法（如冒泡排序和选择排序）。这些方法可以帮助开发者更好地处理字符串排序问题，提高代码的效率和可读性。根据具体...
"阿里web前端开发手册" 阿里web前端开发手册是一份详细的前端开发规范，涵盖了项目命名、目录命名、JS、CSS、SCSS、HTML、PNG 文件命名等多个方面的命名规范。下面是本手册中的一些重要知识点： 1. 命名规范： 在...
在这个特定的题目“OJ_整型字符串排序”中，我们面临的是一个关于整型字符串排序的挑战。由于描述中提到只有资源文件而没有入口程序和测试用例，这意味着我们需要自己构建解决问题的算法并编写相应的代码。 整型...
在编程领域，字符串、整型数据和字符型数组是三种基本的数据类型，它们在不同的场景下各有用武之地。在实际开发中，我们经常需要在这三者之间进行转换，以便处理不同类型的数据。以下是对这些转换的详细说明： 一、...
此外，还讲解了数组和字符串的操作方法，正则表达式的应用，以及面向对象的编程基础。在BOM（浏览器对象模型）和DOM（文档对象模型）的章节中，学习了如何通过JavaScript操作浏览器的窗口、历史、位置等对象，以及...
面试题练习题前端 JavaScript高级语法-字符串属性面试题练习题前端 JavaScript高级语法-字符串属性面试题练习题前端 JavaScript高级语法-字符串属性面试题练习题前端 JavaScript高级语法-字符串属性面试题练习题前端...
判断输入的是否是浮点型，自己整理两种方法实现输入内容是否为浮点型数据
微信小程序——首字母排序选择（截图+源码）.zip 微信小程序——首字母排序选择（截图+源码）.zip 微信小程序——首字母排序选择（截图+源码）.zip 微信小程序——首字母排序选择（截图+源码）.zip 微信小程序——首...
在IT领域，字符串排序是一个常见的...在实际应用中，我们还可以探索更高效的排序算法，如快速排序、归并排序等，但基本思路都是类似的：将字符串拆分成可操作的单元，转换为适当的数据类型，排序，然后再转换回字符串。