可以对表格的各列进行排序的函数类
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<头>
<meta http-equiv=Content-Type content=text/html;字符集=gb2312/>
<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>
<td> <a href=javascript:void(0) id=idTitle>名称</a> / <a href=javascript:void(0) id=idExt>类型</a></td>
<td width=200align=center><a href=javascript:void(0) id=idAddtime class=up>上传时间</a></td>
<td width=50align=center><a href=javascript:void(0) id=idSize>大小</a></td>
</tr>
</标题>
<tbody id=idList>
<tr>
<td _ext=rar>new.rar</td>
<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>
<td _ext=htm>1.htm</td>
<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>
<td _ext=htm>4.htm</td>
<tdalign=center_order=2008/10/4 20:21:54>2008-10-4 20:21:54</td>
<tdalign=right_order=351>351b</td>
</tr>
<tr>
<td _ext=xml>新闻.xml</td>
<tdalign=center_order=2008/10/4 20:24:11>2008-10-420:24:11</td>
<tdalign=right_order=14074>13.74K</td>
</tr>
<tr>
<td _ext=xsl>新闻.xsl</td>
<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>