js table排序类代码

作者：Eve Cole 更新时间：2025-03-10 16:32:01

可以对表格的各列进行排序的函数类

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<头>

<title>表格排序类</title>

</头>

<正文>

<样式类型=文本/css>

.fu_list{ 宽度:400px;边框：1px实心#ebebeb;行高：20px;字体大小：12px；}

.fu_list thead td{背景颜色:#ebebeb;}

.fu_list td{填充：5px;}

.fu_list a{outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/ text-decoration:none;颜色：#333；}

.fu_list 头部 a{padding-right:15px;}

.fu_list thead a.up, .fu_list thead a.down{ 背景:url(up.gif) 右中无重复; }

.fu_list thead a.down{background-image:url(down.gif);}

</风格>

<表格边框=0 cellspacing=0 cellpadding=0 class=fu_list>

<标题>

<tr>

</tr>

</标题>

<tr>

<tdalign=center_order=2008/9/12 8:51:09>2008-9-12 8:51:09</td>

<tdalign=right_order=433247>423.09K</td>

</tr>

<tr>

<td _ext=js>TagControl.js</td>

<tdalign=center_order=2008/9/23 11:26:57>2008-9-23 11:26:57</td>

<tdalign=right_order=1387>1.35K</td>

</tr>

<tr>

<td _ext=js>Scroller.js</td>

<tdalign=center_order=2008/9/23 11:26:57>2008-9-23 11:26:57</td>

<tdalign=right_order=2556>2.5K</td>

</tr>

<tr>

<td _ext=js>AlertBox.js</td>

<tdalign=center_order=2008/9/23 11:26:57>2008-9-23 11:26:57</td>

<tdalign=right_order=3565>3.48K</td>

</tr>

<tr>

<tdalign=center_order=2008/10/4 20:21:54>2008-10-4 20:21:54</td>

<tdalign=right_order=11394>11.13K</td>

</tr>

<tr>

<tdalign=center_order=2008/10/4 20:21:54>2008-10-4 20:21:54</td>

<tdalign=right_order=351>351b</td>

</tr>

<tr>

<tdalign=center_order=2008/10/4 20:24:11>2008-10-420:24:11</td>

<tdalign=right_order=14074>13.74K</td>

</tr>

<tr>

<tdalign=center_order=2008/10/4 20:24:11>2008-10-420:24:11</td>

<tdalign=right_order=16796>16.4K</td>

</tr>

<tr>

<td _ext=js>function.js</td>

<tdalign=center_order=2008/10/4 20:24:11>2008-10-420:24:11</td>

<tdalign=right_order=2844>2.78K</td>

</tr>

</tbody>

</表>

<脚本类型=文本/javascript>

var $ = 函数（id）{

返回字符串 == typeof id ? document.getElementById(id) : id;

};

var 类 = {

创建：函数（）{

返回函数（）{

this.initialize.apply(this, 参数);

}

Object.extend = 函数（目标，源）{

for (源中的 var 属性) {

目的地[属性] = 源[属性];

}

返回目的地；

}

函数每个（列表，乐趣）{

for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } }

};

/////////////////////////////////////////////////////////////////

var TableOrder = Class.create();

TableOrder.prototype = {

初始化：函数（tbody）{

var oThis = this;

this.Body = $(tbody);//tbody对象

this.Rows = [];//行集合

Each(this.Body.rows, function(o){ oThis.Rows.push(o); })

//排序并显示

排序：函数（顺序）{

//排序

this.Rows.sort(this.Compare(order));

order.Down && this.Rows.reverse();

// 显示表格

var oFragment = document.createDocumentFragment();

Each(this.Rows, function(o){ oFragment.appendChild(o); });

this.Body.appendChild(oFragment);

//比较函数

比较：函数（顺序）{

var oThis = this;

返回函数（o1，o2）{

var value1 = oThis.GetValue(o1, order), value2 = oThis.GetValue(o2, order);

返回值1 < 值2 ? -1：值1 > 值2？ 1：0；

};

//获取比较值

GetValue：函数（tr，订单）{

var data = tr.getElementsByTagName(td)[order.Index].getAttribute(order.Attribute);

//数据转换

开关 (order.DataType.toLowerCase()) {

案例整数：

返回 parseInt(数据) || 0;

案例浮动：

返回 parseFloat(数据) || 0;

案件日期：

返回 Date.parse(data) || 0;

大小写字符串：

默认：

返回 data.toString() || ;

}

//添加并返回一个排序对象

添加：函数（索引，选项）{

var oThis = this;

返回新函数(){

// 属性默认

this.Attribute = innerHTML;//获取数据的属性

this.DataType = string;//数据类型

this.Down = false;//是否按顺序

Object.extend(this, 选项 || {});

//排序对象的属性

this.Index = 索引；

this.Sort = function(){ oThis.Sort(this); };

};

}

var to = new TableOrder(idList);

函数 SetOrder(obj, 索引, 选项){

var o = $(obj);

//添加一个排序对象

var order = to.Add(索引, 选项);

o.onclick = 函数(){

//取准确排序

order.Down = !order.Down;

//设置样式

Each(SetOrder._arr, function(o){ o.className = ; })

o.className = order.Down ?下：上；

//排序显示

order.Sort();

返回假；

}

//_arr是记录排序项目（这里主要用于设置样式）

SetOrder._arr ？ SetOrder._arr.push(o) : SetOrder._arr = [];

}

SetOrder(idTitle, 0);

SetOrder(idExt, 0, { 属性: _ext });

SetOrder(idAddtime, 1, { 属性: _order, 数据类型: 日期 });

SetOrder(idSize, 2, { 属性: _order, 数据类型: int });

</脚本>

</正文>

</html>