javascript表格排序

本文详细介绍了如何通过JavaScript实现表格局部排序的功能,包括排序函数的定义、数据类型的转换以及排序逻辑的实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//=====表格局部排序=====
//排序 tableId: 表的id,iCol:第几列 ;dataType:iCol对应的列显示数据的数据类型
function sortTable(tableId, iCol, dataType){
var table = document.getElementById(tableId);
var tbody = table.tBodies[0];
var colRows = tbody.rows;
var aTrs = new Array;
var sortOrder = "asc";
//将将得到的列放入数组,备用
for (var i=0; i < colRows.length-1; i++) {
aTrs[i] = colRows[i+1];
}
//判断上一次排列的列和现在需要排列的是否同一个,如果行数变了,
//则需要重新排序,而不是reverse。
if (table.sortCol == iCol) {
sortOrder = changeSortType(table.sortType);
aTrs.sort(compareEle(iCol, dataType,sortOrder));
//aTrs.reverse();
} else {
//如果不是同一列,使用数组的sort方法,传进排序函数
aTrs.sort(compareEle(iCol, dataType,sortOrder));
}
var oFragment = document.createDocumentFragment();

for (var i=0; i < aTrs.length; i++) {
oFragment.appendChild(aTrs[i]);
}
tbody.appendChild(oFragment);
//记录最后一次排序的表格升降以及列索引
table.sortType = sortOrder;
table.sortCol = iCol;
}
//改变排序类型
function changeSortType(type)
{
if(type=="desc"){
return "asc";
}
else
{
return "desc";
}
}
//将列的类型转化成相应的可以排列的数据类型
function convert(sValue, dataType) {
switch(dataType) {
case "int":
return parseInt(sValue);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
default:
return sValue.toString();
}
}

//排序函数,iCol表示列索引,dataType表示该列的数据类型
function compareEle(iCol, dataType,sortType) {
return function (oTR1, oTR2) {
var vValue1 = convert(getCellText(oTR1.cells[iCol]), dataType);
var vValue2 = convert(getCellText(oTR2.cells[iCol]), dataType);
if(sortType=="desc")
{
if (vValue1 > vValue2) {
return -1;
} else if (vValue1 < vValue2) {
return 1;
} else {
return 0;
}
}
else
{
if (vValue1 < vValue2) {
return -1;
} else if (vValue1 > vValue2) {
return 1;
} else {
return 0;
}
}
};
}

//获取某行该列的值
function getCellText(ob){
if (ob.textContent != null)
return ob.textContent;
var s = ob.innerText;
return s.substring(0, s.length);
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值