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>