var indexCol;
//比较函数，用于Array.sort()排序时比较用。
//本函数比较数组元素array1[indexCol]和元素array2[indexCol]Unicode值的大小
function arrayCompare(array1,array2){
//alert(array1.length+"--"+array1[indexCol]);
if (array1[indexCol] < array2[indexCol])
return -1;
if (array1[indexCol] > array2[indexCol])
return 1;
return 0;
}
//比较数组元素array1[indexCol]和元素array2[indexCol]的数值大小
function arrayCompareNumber(array1,array2){
if (parseInt(array1[indexCol]) < parseInt(array2[indexCol]))
return -1;
if (parseInt(array1[indexCol]) > parseInt(array2[indexCol]))
return 1;
return 0;
}
//与arrayCompare相反方式比较大小，用于倒序使用
function arrayCompareRev(array1,array2){
if (array1[indexCol] < array2[indexCol])
return 1;
if (array1[indexCol] > array2[indexCol])
return -1;
return 0;
}
//与arrayCompareNumber相反方式比较大小，用于倒序使用
function arrayCompareNumberRev(array1,array2){
if (parseInt(array1[indexCol]) < parseInt(array2[indexCol]))
return 1;
if (parseInt(array1[indexCol]) > parseInt(array2[indexCol]))
return -1;
return 0;
}
//define a 2-dimension array
function BiArray(rows,cols){
//simulate multidimension array
this.rows = rows;
this.cols = cols;
//construct array
var lines = new Array(rows);
for(var i = 0;i < lines.length; i++){
lines[i] = new Array(cols);
}
// 设置数组在(i,j)的元素值为value
this.setElement = function(i,j,value){ lines[i][j] = value; };
// 获取数组在(i,j)处元素的值
this.getElement = function(i,j){return lines[i][j];};
// 返回数组第i行所在的数组
this.getLine = function(i){return lines[i];};
// 根据第j列字符串的值,对数组的行进行排序,排序结果为升序
this.sortLine = function(j){
indexCol = j;
lines.sort(arrayCompare);
};
// 根据第j列数值的值,对数组的行进行排序,排序结果为升序
this.sortLineByNumber = function(j){
indexCol = j;
lines.sort(arrayCompareNumber);
};
// 根据第j列字符串的值,对数组的行进行排序,排序结果为倒序
this.sortLineRev = function(j){
indexCol = j;
lines.sort(arrayCompareRev);
};
// 根据第j列数值的值,对数组的行进行排序,排序结果为倒序
this.sortLineByNumberRev = function(j){
indexCol = j;
lines.sort(arrayCompareNumberRev);
};
//将二维数组转为字符串格式
this.toString = function(){
var rst ="";
for(var i = 0; i < lines.length; i++){
for(var j = 0; j < lines[i].length; j++){
rst += lines[i][j];
rst += '\t';
}
rst += '\n';
}
return rst;
};
} // end of BiArray define
//ascending or descending
var asce = true;
/**
对表格中指定范围的数据进行排序
tableId 要排序的表格的id,值格式为 <table id="tb1" >
sortCol 用于排序的列号,从1开始计数
compareType 排序时比较方式，s-按字符串比较,n-按数值比较
startRow 排序范围起始行号,从1开始计数
endRow 排序范围结束行号,从1开始计数
startCol 排序范围起始列号,从1开始计数
endCol 排序范围结束列号,从1开始计数
*/
function sortTableInRange(tableId,sortCol,compareType,startRow,endRow,startCol,endCol){
try{
var table = document.getElementById(tableId);
// get all row object of the table
var objRows = table.getElementsByTagName("tr");
//alert(objRows.length);
endRow = (endRow < objRows.length ? endRow : objRows.length);
var sortRows = endRow - startRow + 1;
//alert("sortRows "+sortRows);
if (sortRows < 2) //only one line,don't sort
return ;
endCol = (endCol < objRows[1].getElementsByTagName("td").length ? endCol :
objRows[1].getElementsByTagName("td").length);
// column number of sort
//var cols = objRows[1].childNodes.length;
var cols = endCol - startCol + 1;
// define a array to store table cell and sort them
var tabData = new BiArray(sortRows,cols);
var ari = 0;
// retrived table cell data save to array
for(i = startRow - 1; i < endRow; i++){
//retrived all <td> cell
var cells = objRows[i].getElementsByTagName("td");
var arj = 0;
for(var j = startCol - 1; j < endCol; j++){
tabData.setElement(ari,arj,cells.item(j).innerHTML);
arj++;
}
ari++;
}
if (asce){
if (compareType == "n" || compareType == 'N')
tabData.sortLineByNumber(sortCol- startCol);
else
tabData.sortLine(sortCol - startCol);
asce = false;
}else{
if (compareType == "n" || compareType == 'N')
tabData.sortLineByNumberRev(sortCol - startCol);
else
tabData.sortLineRev(sortCol - startCol);
asce = true;
}
ari = 0;
//update table data with array
for(i = startRow -1; i < endRow; i++){
//retrived all <td> cell
var cells = objRows[i].getElementsByTagName("td");
arj = 0;
for(var j = startCol - 1; j < endCol; j++){
cells.item(j).innerHTML = tabData.getElement(ari,arj);
arj++;
}
ari++;
}
}catch(e){
alert(e);
}
}
/**
对表格除第一行外的数据行排序,是sortYableInRange(tableId,sortCol,compareType,2,tabRows,1,tabCols)
的特例。
tableId 要排序的表格的id,值格式为 <table id="tb1" >
用于排序的列号,从1开始计数
compareType 排序时比较方式，s-按字符串比较,n-按数值比较
*/
function sortTable(tableId,sortCol,compareType){
try{
var table = document.getElementById(tableId);
// get all row object of the table
var objRows = table.getElementsByTagName("tr");
//alert(objRows.length);
var endRows = objRows.length;
if (endRows < 2) //only one line,don't sort
return ;
// column number of table
var cols = objRows[1].getElementsByTagName("td").length;
sortTableInRange(tableId,sortCol,compareType,2,endRows,1,cols);
}catch(e){
alert(e);
}
}
分享到：
相关推荐
javascript动态排序表格 javascript动态排序表格 javascript动态排序表格 javascript动态排序表格
使用 JavaScript 排序数据并渲染到页面+源码+demo演示 使用 JavaScript 排序数据并渲染到页面+源码+demo演示 使用 JavaScript 排序数据并渲染到页面+源码+demo演示 使用 JavaScript 排序数据并渲染到页面+源码+...
排序算法是计算机科学的基础，JavaScript中的排序算法实现可以帮助我们更高效地处理数组数据。本篇文章将详细探讨JavaScript中几种常见的排序算法及其实现。 1. **冒泡排序**： 冒泡排序是最基础的排序算法之一，...
### JavaScript排序算法动画演示效果的实现方法 实现JavaScript排序算法动画演示效果是一个涉及前端技术栈的有趣话题。其核心在于如何将排序算法的每一步骤用动画的形式展示给用户，同时保证动画的流畅性和准确性。...
基于javascript的排序算法源码，包括冒泡排序、选择排序、希尔排序、插入排序、快速排序、归并排序、基数排序、堆排序
本篇文章将详细探讨如何使用JavaScript，结合jQuery库，来实现数据的分页显示以及表格内容的排序。 **一、排序** 在JavaScript中，数组的排序可以使用`Array.prototype.sort()`方法。这个方法接受一个比较函数作为...
简单的JavaScript排序二叉树，方便理解，由浅入深学习必备
3. **原生JavaScript排序**：你可以通过获取表格数据，对其进行排序，然后重新渲染表格。例如，使用`Array.prototype.sort()`函数对表格数据进行排序，再利用DOM操作更新表格内容。 4. **事件监听**：为了实现点击...
在这个“数字排序.rar”压缩包中，我们很可能是看到了一个关于如何使用JavaScript进行数字排序的实例。 在JavaScript中，数组的排序可以通过`Array.prototype.sort()`方法来实现。这个方法接受一个可选的比较函数...
JavaScript 中常见排序算法详解
javascript排序函数实现数字排序 [removed] function SortNumber(obj,func) //定义通用排序函数 { //参数验证，如果第一个参数不是数组或第二个参数不是函数则抛出异常 if(!(obj instanceof Array) || !(func ...
JavaScript排序主要通过数组的`sort()`方法实现，但这个方法并不直接适用于HTML表格。首先，我们需要获取表格数据并将其转换为二维数组。这可以通过遍历表格的所有行和单元格来完成： ```javascript let table = ...
JavaScript 直接排序是一种在前端对数据进行处理的技术，它主要应用于从服务器获取数据后，对数据进行客户端的动态排序，以满足用户交互时的实时排序需求。在本例中，我们关注的是如何利用JavaScript对从数据库读取...
运用javascript排序，数组的sort方法
这篇我们将深入探讨如何使用JavaScript实现表格排序，包括对数字、日期和汉字的排序。 首先，我们需要理解HTML表格的基本结构，通常由`<table>`、`<tr>`（行）、`<th>`（表头）和`<td>`（数据单元格）组成。为了...
JavaScript排序算法 使用JavaScript实现的排序算法集合。 到目前为止，我们已经在此介绍了 ， ， 算法。 有关更多排序算法，请继续关注！ 运行此应用程序 该项目是使用commonjs约定编写的，即在nodejs环境中编写的，...
这个名为"JavaScript-数据排序添加.rar"的压缩包显然包含了与使用JavaScript处理数据排序和添加相关的资源。下面我们将深入探讨这些知识点。 首先，我们看到一个名为"data.css"的文件，这通常用于定义网页的样式。...
javascript 排序库包括：珠排序、重力排序、桶排序、分箱排序、计数排序、插入排序、合并排序、基数排序 排序算法是一种将列表中的元素按一定顺序排列的算法。 最常用的顺序是数字顺序和字典顺序。 高效排序对于优化...