来自 javasscript 高级设计书中
主要是使用了 Array 数组的 sort方法 函数内传入函数
dataType 可以 设置，这个比较简单 使用 localeCompare 函数比较
学习这个用于修改 jquery flexigrid 使用 前端排序
<html>
<head>
<title>mutiple table sorting</title>
<script type="text/javascript">
function generateCompareTRs(iCol){
return function compareTRs(oTR1,oTR2){
var sValue1 = oTR1.cells[iCol].firstChild.nodeValue;
var sValue2 = oTR2.cells[iCol].firstChild.nodeValue;
return sValue1.localeCompare(sValue2);
};
}
function sortTable(sTableID,iCol){
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.push(colDataRows[i]);
if(oTable.sortCol ==iCol)
aTRs.reverse();
else
aTRs.sort(generateCompareTRs(iCol));
var oFragment = document.createDocumentFragment();
for(var i = 0;i<aTRs.length;i++)
oFragment.appendChild(aTRs[i]);
oTBody.appendChild(oFragment);
oTable.sortCol = iCol;
}
</script>
<table id="tblSort" border="1">
<tHead>
<tr><th onclick="sortTable('tblSort',0)" style="cursor:pointer">no</th><th onclick="sortTable('tblSort',1)" style="cursor:pointer">information</th></tr>
</tHead>
<tBody>
<tr><td>1</td><td>mo</td></tr>
<tr><td>2</td><td>aaa</td></tr>
<tr><td>3</td><td>cc</td></tr>
<tr><td>4</td><td>dddd</td></tr>
<tr><td>5</td><td>jianpo</td></tr>
<tr><td>6</td><td>ffff</td></tr>
</tBody>
</table>
</head>
</html>
分享到：
相关推荐
JavaScript表格排序是一个常见的需求，特别是在网页中展示数据时。它允许用户通过点击表头来对数据进行升序或降序排列。在这个实例中，我们将深入探讨JavaScript如何实现表格的动态排序。 首先，我们需要理解HTML...
JavaScript表格排序2.0是一个更新版本的实现，用于在网页中的HTML...通过这些更新，JavaScript Table排序2.0不仅提升了用户体验，也提供了更强大、更灵活的功能，使得开发者可以轻松地在项目中集成和定制表格排序功能。
JavaScript表格排序是网页开发中常见的需求，特别是在处理动态数据或者用户交互时。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先，我们需要理解HTML `<table>`元素的基本结构。一个表格由`...
本文介绍的JavaScript Table排序2.0版本，相较于早期版本进行了更新和改进，接下来我将详细阐述这些知识点。 1. 对字符串改用localeCompare来比较 在进行排序时，尤其是涉及到字符串的比较，localeCompare是一个...
JavaScript实现表格排序主要涉及以下知识点： 1. 获取表格对象：在JavaScript中，可以通过document.getElementById方法获取页面中的元素对象。比如，可以使用此方法获取一个表格（table）元素对象，这里以tblData...
在JavaScript中，操作HTML表格（Table）进行排序是一项常见的任务，尤其在动态数据展示和用户交互中。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先，我们需要理解HTML表格的基本结构。一个HTML...
在JavaScript中，对HTML表格（`<table>`）进行排序是一项常见的需求，特别是在处理大量数据时，用户可能希望根据特定列来动态调整表格顺序。在不改变表格结构的前提下，可以利用JavaScript实现这样的功能，通常涉及...
在JavaScript（js）中，对HTML表格（Table）进行排序是一项常见的需求，特别是在网页交互和数据展示中。本文将深入探讨如何使用JavaScript实现点击表头进行动态排序，并处理各种复杂情况，如包含HTML标签的单元格、...
以下是一些关于“html中table排序”的关键知识点： 1. **静态排序**： - HTML的`<table>`标签提供了基本的表格结构，如`<thead>`（表头）、`<tbody>`（主体内容）、`<tfoot>`（表尾）等，但它们不具备排序功能。 ...
程序的实现的是在客户端对表格进行排序，有以下特点： 1.自定义排序列、排序属性（例如innerHTML）、排序数据类型（包括int、float、date、string）、排序顺序（顺序和倒序）； 2.自定义排序函数； 3.可同时设置...
在JavaScript的世界里，实现表格（table）数据的自动排序是一项常见的需求。这通常涉及到对HTML DOM的操作以及数据处理。在给定的资源中，“原生js table表格自动排序效果”提供了一个无需依赖任何外部库（如jQuery...
在JavaScript中，对HTML表格（`<table>`）进行排序是一项常见的需求，特别是在动态数据展示和用户交互的应用中。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先，我们要理解HTML表格的基本结构，...
在这个"很好用的javascript_table排序"示例中，我们可以通过分析源代码来学习如何实现这个功能。虽然这个实现可能并不完美，但它提供了一些基本的技巧和原理，有助于理解JavaScript如何处理表格数据的排序。 首先，...
本篇文章将深入探讨“jQuery Table Sort”插件，这是一种专门用于在jQuery环境下对表格数据进行排序的工具。 首先，我们要理解jQuery Table Sort插件的基本工作原理。这个插件允许用户通过点击表格的表头来实现数据...
本篇将围绕"实现table排序（以备不时之需）"这一主题，详细讲解如何利用jQuery及其插件来实现表格数据的动态排序。 首先，我们看到标签中提到了"源码"和"工具"，这意味着我们将探讨一段具体的代码和可能使用的工具...
在网页开发中，数据展示通常会使用表格（Table）元素，而为了使用户能更方便地浏览和理解数据，我们常常需要实现表头点击时自动排序的功能。这个功能的实现主要依赖于JavaScript，因为它提供了对DOM操作和事件监听的...
在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`<table>`元素及其相关...
当我们需要在 HTML 表格（`<table>`）中实现行排序功能时，JavaScript 就派上了大用场。本篇文章将深入探讨如何使用 JavaScript 来实现表格数据的排序。 首先，我们需要了解 HTML `<table>` 的结构。一个简单的表格...