可以对表格的各列进行排序的函数类
<!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>
<tête>
<méta http-equiv=Content-Type content=text/html; jeu de caractères=gb2312 />
<title>tableau 排序类</title>
</tête>
<corps>
<type de style=texte/css>
.fu_list{largeur :400px ; bordure : 1 px solide #ebebeb ; hauteur de ligne : 20 px ; taille de police : 12 px ;}
.fu_list thead td{background-color:#ebebeb;}
.fu_list td{padding:5px;}
.fu_list a{outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/ text-decoration:none; couleur : #333 ;}
.fu_list thead a{padding-right:15px;}
.fu_list thead a.up, .fu_list thead a.down{ background:url(up.gif) centre droit sans répétition ; }
.fu_list thead a.down{background-image:url(down.gif);}
</style>
<table border=0 cellpacing=0 cellpadding=0 class=fu_list>
<tête>
<tr>
<td> <a href=javascript:void(0) id=idTitle>名称</a> / <a href=javascript:void(0) id=idExt>类型</a></td>
<td width=200 align=center><a href=javascript:void(0) id=idAddtime class=up>上传时间</a></td>
<td width=50 align=center><a href=javascript:void(0) id=idSize>大小</a></td>
</tr>
</tête>
<tbody id=idList>
<tr>
<td _ext=rar>nouveau.rar</td>
<td align=center _order=2008/9/12 8:51:09>2008-9-12 8:51:09</td>
<td align=right _order=433247>423,09 K</td>
</tr>
<tr>
<td _ext=js>TagControl.js</td>
<td align=center _order=2008/9/23 11:26:57>2008-9-23 11:26:57</td>
<td align=right _order=1387>1,35 K</td>
</tr>
<tr>
<td _ext=js>Scroller.js</td>
<td align=center _order=2008/9/23 11:26:57>2008-9-23 11:26:57</td>
<td align=right _order=2556>2,5 K</td>
</tr>
<tr>
<td _ext=js>AlertBox.js</td>
<td align=center _order=2008/9/23 11:26:57>2008-9-23 11:26:57</td>
<td align=right _order=3565>3,48 K</td>
</tr>
<tr>
<td _ext=htm>1.htm</td>
<td align=center _order=2008/10/4 20:21:54>2008-10-4 20:21:54</td>
<td align=right _order=11394>11.13 K</td>
</tr>
<tr>
<td _ext=htm>4.htm</td>
<td align=center _order=2008/10/4 20:21:54>2008-10-4 20:21:54</td>
<td align=right _order=351>351 b</td>
</tr>
<tr>
<td _ext=xml>news.xml</td>
<td align=center _order=2008/10/4 20:24:11>2008-10-4 20:24:11</td>
<td align=right _order=14074>13,74 K</td>
</tr>
<tr>
<td _ext=xsl>news.xsl</td>
<td align=center _order=2008/10/4 20:24:11>2008-10-4 20:24:11</td>
<td align=right _order=16796>16,4 Ko</td>
</tr>
<tr>
<td _ext=js>fonction.js</td>
<td align=center _order=2008/10/4 20:24:11>2008-10-4 20:24:11</td>
<td align=right _order=2844>2,78 K</td>
</tr>
</tbody>
</table>
<type de script=texte/javascript>
var $ = fonction (identifiant) {
chaîne de retour == type d'identifiant ? document.getElementById(id) : id;
} ;
var Classe = {
créer : fonction() {
fonction de retour() {
this.initialize.apply(this, arguments);
}
}
}
Objet.extend = fonction (destination, source) {
pour (propriété var dans la source) {
destination[propriété] = source[propriété];
}
destination de retour ;
}
function Chacun(liste, amusant){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
} ;
///////////////////////////////////
///////////////////////////////
var TableOrder = Classe.create();
TableOrder.prototype = {
initialiser : fonction (tbody) {
var oThis = ceci ;
this.Body = $(tbody);//tbody对象
this.Rows = [];//行集合
Chacun(this.Body.rows, function(o){ oThis.Rows.push(o); })
},
//排序并显示
Trier : fonction (ordre) {
//排序
this.Rows.sort(this.Compare(order));
order.Down && this.Rows.reverse();
//显示表格
var oFragment = document.createDocumentFragment();
Chacun(this.Rows, function(o){ oFragment.appendChild(o); });
this.Body.appendChild(oFragment);
},
//比较函数
Comparez : fonction(ordre) {
var oThis = ceci ;
fonction de retour (o1, o2) {
var value1 = oThis.GetValue(o1, commande), value2 = oThis.GetValue(o2, commande);
renvoyer valeur1 < valeur2 ? -1 : valeur1 > valeur2 ? 1 : 0 ;
} ;
},
//获取比较值
GetValue : fonction (tr, commande) {
var data = tr.getElementsByTagName(td)[order.Index].getAttribute(order.Attribute);
//数据转换
commutateur (order.DataType.toLowerCase()) {
cas entier :
retourner parseInt(données) || 0 ;
cas flottant :
retourner parseFloat(données) || 0 ;
date du cas :
return Date.parse(data) || 0 ;
chaîne de casse :
défaut:
retourner data.toString() || ;
}
},
//添加并返回一个排序对象
Ajouter : fonction (index, options) {
var oThis = ceci ;
renvoyer une nouvelle fonction(){
//默认属性
this.Attribute = innerHTML;//获取数据的属性
this.DataType = string;//数据类型
this.Down = false;//是否按顺序
Objet.extend(this, options || {});
//排序对象的属性
this.Index = index;
this.Sort = function(){ oThis.Sort(this); } ;
} ;
}
}
var à = new TableOrder(idList);
fonction SetOrder(obj, index, options){
var o = $(obj);
//添加一个排序对象
var order = to.Add(index, options);
o.onclick = fonction(){
//取相反排序
commande.Down = !order.Down;
//设置样式
Chacun(SetOrder._arr, function(o){ o.className = ; })
o.className = commande.Down ? bas : haut;
//排序显示
order.Sort();
renvoie faux ;
}
//_arr是记录排序项目(这里主要用来设置样式)
SetOrder._arr ? SetOrder._arr.push(o) : SetOrder._arr = [];
}
SetOrder(idTitre, 0);
SetOrder(idExt, 0, { Attribut : _ext });
SetOrder(idAddtime, 1, { Attribut : _order, DataType : date });
SetOrder(idSize, 2, { Attribut : _order, DataType : int });
</script>
</corps>
</html>