js table排序类代码

更新时间：2008年10月05日 14:46:05 作者：

可以对表格的各列进行排序的函数类

<!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>&nbsp;<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.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需再刷新一下页面才能执行]

您可能感兴趣的文章:

asp 取得用户真实IP，对代理地址仍然有效的函数
这篇文章主要介绍了asp 取得用户真实IP，对代理地址仍然有效的函数,需要的朋友可以参考下
2007-08-08
CJJ专用ASP类库中的某个class
CJJ专用ASP类库中的某个class...
2006-07-07
ASP控制每页打印行数
ASP控制每页打印行数...
2007-09-09
支持权重的无组件ASP广告显示代码
支持权重的无组件ASP广告显示代码...
2007-03-03
asp中cint与clng的区别分析
cint与clng含义都可以强制将一个表达式转换成数据类型，介绍归介绍，如果文章id一定要使用clng，不可能文章就32767篇的
2013-03-03
asp下实现替换远程文件为本地文件并保存远程文件的代码
asp下实现替换远程文件为本地文件并保存远程文件的代码...
2007-03-03
asp 存储过程分页代码
asp类加存储过程分页方法，查询使用非常方便 new 一个类，加几个参数，就可以分页显示、多条件查询、多个字段排序等功能、连表查询等，一气呵成！
2008-12-12
ASP IE地址栏参数的判断
在服务器端asp程序可以接受html页面上的form传来的参数，那么它又如何实现IE地址参数判断呢？
2008-12-12
ASP正则表达式清除HTML指定标签的方法
这篇文章主要介绍了ASP正则表达式清除HTML指定标签的方法，告诉大家如何精准的过滤掉某些特定的属性标签和参数，感兴趣的小伙伴们可以参考一下
2015-09-09
ASP中实现的URLEncode、URLDecode自定义函数
这篇文章主要介绍了ASP中实现的URLEncode、URLDecode自定义函数,和ASP自带的server.urlencode是不一样的哦,需要的朋友可以参考下
2014-07-07

软件下载

源码下载

软件编程

网络编程

在线工具

数据库

CMS

常用工具

js table排序类代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具