在功能上实现了对表格不同内容的升序和降序的排序，内容可能是字符串，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;
}
}
}
分享到：
相关推荐
本资源“jQuery Table表格排序显示代码.zip”聚焦于利用jQuery实现动态表格排序的功能，这对于数据展示和用户交互至关重要。下面将详细阐述相关知识点。 1. **jQuery基础**：首先，理解jQuery的基础是至关重要的。...
而JavaScript实现的表格排序功能则能够帮助用户更方便地管理和理解这些数据。这篇我们将深入探讨如何使用JavaScript实现表格排序，包括对数字、日期和汉字的排序。 首先，我们需要理解HTML表格的基本结构，通常由`...
总的来说，原生js table表格自动排序效果的实现涉及到HTML结构的理解、JavaScript事件处理、数组排序算法的运用以及DOM操作。这是一个实用的功能，通过学习和理解这个例子，可以提升我们对前端开发中数据处理和交互...
总结起来，这个JavaScript表格排序示例展示了如何通过监听表头点击事件，使用纯JavaScript实现表格数据的动态排序。它依赖于HTML表格结构，通过JavaScript操作DOM节点进行数据比较和位置交换。在实际项目中，可以...
<title>JavaScript表格排序 table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; } th { cursor: pointer; } <table id=...
而“table表格排序效果”则是提高用户体验的重要功能，允许用户根据某一列的数据对整个表格进行升序或降序排列。这个“table表格排序效果源码下载”提供了一个实现这一功能的代码示例。 排序功能对于处理大量数据至...
"实现table表格可按行拖拽，按列排序，并可以保存排序后的结果"是一个常见的需求，尤其适用于数据展示和管理的场景。这里我们将详细探讨如何利用jQuery、jQuery.tablesorter和jQuery.tablednd_0_5这三个JavaScript库...
"Table表格排序显示jQuery代码"是一个实用的工具，它允许用户通过简单的点击表头来实现表格数据的多维度排序，包括分类排序、数字大小排序以及英文排序等。这个功能极大地提升了用户体验，使得大量数据的浏览和分析...
JavaScript表格排序是一个常见的需求，特别是在网页中展示数据时。它允许用户通过点击表头来对数据进行升序或降序排列。在这个实例中，我们将深入探讨JavaScript如何实现表格的动态排序。 首先，我们需要理解HTML...
本篇文章将深入探讨如何使用jQuery实现表格排序，以及与之相关的知识点。 首先，我们看到的`TableOrder('ordert',3,0,1)`函数是用于对表格进行排序的自定义函数。这个函数接受四个参数： 1. `ordert`：这是排序所...
JavaScript 实现表格排序是网页开发中的常见需求，尤其在数据展示和管理中起到关键作用。在本项目"tiger-auntion-TableSort-测试交流版"中，我们看到一个简洁易用的表格排序功能。下面将详细讲解如何使用 JavaScript...
下面我们将深入探讨如何使用JavaScript实现表格排序功能。 一、HTML表格基础 在HTML中，`<table>`元素用于创建表格，`<tr>`表示表格行，`<th>`表示表头单元格，`<td>`表示数据单元格。例如： ```html <table id=...
1. 引入Bootstrap、jQuery、TableDnD以及Bootstrap表格排序扩展的CSS和JS文件。 2. 创建一个基本的Bootstrap表格结构。 3. 使用JavaScript（可能是jQuery）来初始化表格，并设置`reorderRows`为`true`，以启用拖拽...
**Blue Table：JavaScript表格排序插件** 在网页开发中，数据展示经常需要用到表格，而对表格数据进行排序是用户交互中的常见需求。Blue Table是一款基于JavaScript的表格排序插件，它能够帮助开发者轻松实现表格...
JavaScript表格排序大全是一个涵盖多种JS表格排序实现方法的资源集合，旨在帮助开发者快速实现动态、交互式的表格数据排序功能。在网页开发中，表格是一种常用的数据展示方式，而JavaScript能够为表格提供强大的交互...
在网页开发中，数据展示通常会使用到表格（Table）元素，而为了提供更好的用户体验，我们经常需要在用户交互时实现表格数据的动态排序，即表格排序功能。本示例"javascript页面表格实现不刷新排序的例子"正是针对这...
本资源“Table表格排序显示jQuery代码.zip”包含了一个使用jQuery实现的表格排序功能，这对于数据展示和用户交互至关重要。下面将详细解释这个项目中涉及的关键知识点。 1. **jQuery基础**： jQuery的核心是选择器...
JavaScript表格排序是网页开发中常见的需求，特别是在处理动态数据或者用户交互时。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先，我们需要理解HTML `<table>`元素的基本结构。一个表格由`...
JavaScript表格排序是一个在网页开发中常见的需求，尤其是在处理大量数据时。这个功能强大的JavaScript库，被称为"sorttable"，能够帮助开发者轻松实现表格数据的排序，同时提供了自定义排序规则的能力，大大增强了...
在JavaScript中，操作HTML表格...综上所述，JavaScript操作HTML表格排序涉及数据提取、自定义比较函数、事件监听以及DOM操作等多个方面。理解这些概念并灵活运用，可以帮助我们创建功能强大且用户体验良好的表格应用。