可以对表格的各列进行排序的函数类
<!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>
</head>
<본문>
<스타일 유형=텍스트/css>
.fu_list{ 너비:400px; 테두리:1px 실선 #ebebeb;줄 높이:20px; 글꼴 크기:12px;}
.fu_list 광고 td{배경색:#ebebeb;}
.fu_list td{패딩:5px;}
.fu_list a{outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/ text-꾸밈:none; 색상:#333;}
.fu_list 광고 a{padding-right:15px;}
.fu_list thead a.up, .fu_list thead a.down{ background:url(up.gif) 오른쪽 중앙 no-repeat; }
.fu_list 광고 a.down{배경-이미지:url(down.gif);}
</style>
<테이블 테두리=0 셀 간격=0 셀 패딩=0 클래스=fu_list>
<머리>
<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>
</thead>
<tbody id=idList>
<tr>
<td _ext=rar>new.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.09K</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.35K</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.5K</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.48K</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.13K</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>351b</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.74K</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.4K</td>
</tr>
<tr>
<td _ext=js>function.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.78K</td>
</tr>
</tbody>
</table>
<스크립트 유형=텍스트/자바스크립트>
var $ = 함수(id) {
반환 문자열 == ID 유형 ? document.getElementById(id) : id;
};
var 클래스 = {
생성: 함수() {
반환 함수() {
this.initialize.apply(this, 인수);
}
}
}
Object.extend = function(대상, 소스) {
for(소스의 var 속성) {
목적지[속성] = 소스[속성];
}
귀국 목적지;
}
함수 Each(목록, 재미){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};
/////////////////////////////////////
/////////////////////////////////
var TableOrder = Class.create();
TableOrder.prototype = {
초기화: 함수(tbody) {
var oThis = 이것;
this.Body = $(tbody);//tbody对象
this.Rows = [];//행렬합
각각(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 = 이것;
반환 함수(o1, o2) {
var value1 = oThis.GetValue(o1, 순서), value2 = oThis.GetValue(o2, 순서);
반환 값1 < 값2 ? -1 : 값1 > 값2 ? 1:0;
};
},
//获取比较值
GetValue: 함수(tr, 순서) {
var data = tr.getElementsByTagName(td)[order.Index].getAttribute(order.Attribute);
//数据转换
스위치(order.DataType.toLowerCase()) {
케이스 내부:
반환 parInt(data) || 0;
케이스 플로트:
반환 ParseFloat(data) || 0;
사건 날짜:
return Date.parse(data) || 0;
케이스 문자열:
기본:
return data.toString() || ;
}
},
//添加并返回一个排序对象
추가: function(index, options) {
var oThis = 이것;
새로운 함수를 반환합니다(){
//默认属性
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(index, options);
o.onclick = 함수(){
//取反排序
주문.다운 = !주문.다운;
//设置样式
Each(SetOrder._arr, function(o){ o.className = ; })
o.className = 주문.다운 ? 아래 : 위;
//排序显示
주문.정렬();
거짓을 반환;
}
//_arr是记录排序项目(这里主要用来设置样式)
SetOrder._arr ? SetOrder._arr.push(o) : SetOrder._arr = [];
}
SetOrder(idTitle, 0);
SetOrder(idExt, 0, { 속성: _ext });
SetOrder(idAddtime, 1, { 속성: _order, 데이터 유형: 날짜 });
SetOrder(idSize, 2, { 속성: _order, DataType: int });
</script>
</body>
</html>