js table排序类代码

<！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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>table排序类</title> </head> <body> <style type="text/css"> .fu_list{ width:400px; border:1px solid #ebebeb;line-height:20px; font-size:12px;} .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; color:#333;} .fu_list thead a{padding-right:15px;} .fu_list thead a.up, .fu_list thead a.down{ background:url（up.gif） right center no-repeat; } .fu_list thead a.down{background-image:url（down.gif）;} </style> <table border="0" cellspacing="0" cellpadding="0" class="fu_list"> <thead> <tr> <td> 名称 / 类型</td> <td width="200" align="center">上传时间</td> <td width="50" align="center">大小</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.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 K</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.78 K</td> </tr> </tbody> </table> <script type="text/javascript"> var $ = function （id） { return "string" == typeof id ？ document.getElementById（id） : id; }; var Class = { create: function（） { return function（） { this.initialize.apply（this, arguments）; } } } Object.extend = function（destination, source） { for （var property in source） { destination[property] = source[property]; } return destination; } function Each（list, fun）{ for （var i = 0, len = list.length; i < len; i++） { fun（list[i], i）; } }; ///////////////////////////////////// //////////////////////////////// var TableOrder = Class.create（）; TableOrder.prototype = { initialize: function（tbody） { var oThis = this;this.Body = $（tbody）;//tbody对象 this.Rows = [];//行集合Each（this.Body.rows, function（o）{ oThis.Rows.push（o）; }） }, //排序并显示 Sort: function（order） { //排序 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）; }, //比较函数 Compare: function（order） { var oThis = this; return function（o1, o2） { var value1 = oThis.GetValue（o1, order）, value2 = oThis.GetValue（o2, order）; return value1 < value2 ？ -1 : value1 > value2 ？ 1 : 0; }; }, //获取比较值 GetValue: function（tr, order） { var data = tr.getElementsByTagName（"td"）[order.Index].getAttribute（order.Attribute）; //数据转换 switch （order.DataType.toLowerCase（）） { case "int": return parseInt（data） || 0; case "float": return parseFloat（data） || 0; case "date": return Date.parse（data） || 0; case "string": default: return data.toString（） || ""; } }, //添加并返回一个排序对象 Add: function（index, options） { var oThis = this; return new function（）{ //默认属性 this.Attribute = "innerHTML";//获取数据的属性 this.DataType = "string";//数据类型 this.Down = false;//是否按顺序 Object.extend（this, options || {}）; //排序对象的属性 this.Index = index; this.Sort = function（）{ oThis.Sort（this）; }; }; } } var to = new TableOrder（"idList"）; function SetOrder（obj, index, options）{ var o = $（obj）; //添加一个排序对象 var order = to.Add（index, options）; o.onclick = function（）{ //取相反排序 order.Down = ！order.Down; //设置样式 Each（SetOrder._arr, function（o）{ o.className = ""; }） o.className = order.Down ？ "down" : "up"; //排序显示 order.Sort（）; return false; } //_arr是记录排序项目（这里主要用来设置样式） SetOrder._arr ？ SetOrder._arr.push（o） : SetOrder._arr = []; } SetOrder（"idTitle", 0）; SetOrder（"idExt", 0, { Attribute: "_ext" }）; SetOrder（"idAddtime", 1, { Attribute: "_order", DataType: "date" }）; SetOrder（"idSize", 2, { Attribute: "_order", DataType: "int" }）; </script> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]