js table排序类代码 日期：2020-05-13 栏目：程序人生 浏览：次 <!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 </div> <div class="pagess"> <ul> <li><a>共2页: </a></li><li><a href='#'>上一页</a></li><li class="thisclass"><a href='#'>1</a></li><li><a href='2832_2.html'>2</a></li><li><a href='2832_2.html'>下一页</a></li> </ul> </div> <div class="post-nav"> <div class="nav-left">上一篇：<a href='/2831.html'>asp+Access通用的自动替换数据库中的字符串</a> </div> <div class="nav-right">下一篇：<a href='/2833.html'>ASP 关于动态数据显示页面得锚点</a> </div> </div> <div class="post-copyright"> <p>内容版权声明：除非注明，否则皆为本站原创文章。</p> <p>转载注明出处：<a href="http://www.heiqu.com/2832.html" title="js table排序类代码" target="_blank">http://www.heiqu.com/2832.html</a></p> </div> <section class="related"> <h3>相关推荐</h3> <ul> <li><i>2021-04-09</i><span class="top">1</span><a href="/pszzg.html" target="_blank" title="vue.js在标签属性中插入变量参数的方法">vue.js在标签属性中插入变量参数的方法</a></li> <li><i>2021-04-09</i><span class="top">2</span><a href="/pszwp.html" target="_blank" title="cli 打包时抽离项目相关配置文件详解">cli 打包时抽离项目相关配置文件详解</a></li> <li><i>2021-04-09</i><span class="top">3</span><a href="/pszwj.html" target="_blank" title="解决iview打包时UglifyJs报错的问题">解决iview打包时UglifyJs报错的问题</a></li> <li><i>2021-04-09</i><span class="top">4</span><a href="/pszww.html" target="_blank" title="<strong>Ubuntu 编译运行C笔记</strong>"><strong>Ubuntu 编译运行C笔记</strong></a></li> <li><i>2021-04-09</i><span class="top">5</span><a href="/pszyx.html" target="_blank" title="Android 多线程断点续传下载器">Android 多线程断点续传下载器</a></li> </ul> </section> </article> </main> <aside class="sidebar"> <section class="widget" id="divSearchPanel"> <h3><i class="icon-th-list"></i> 搜索</h3> <div> <form name="formsearch" action="/plus/search.php"> <input type="text" name="q" size="11" type="text" id="search-keyword" value="" onfocus="if(this.value=='在这里搜索...'){this.value='';}" onblur="if(this.value==''){this.value='在这里搜索...';}" /> <input type="submit" value="搜索" /> </form> </div> </section> <section class="widget" id="scroll"> <h3><i class="icon-th-list"></i> 热门文章</h3> <ul class="hot-post"> <li> <div class="thumb"><a href="/ade0a61af45be9a357a9ea7a656c51a2.html" title="自动构建平台jenkins使用"><img src="/images/random/tb7.jpg" alt="自动构建平台jenkins使用"/></a></div> <div class="hot-title"><a href="/ade0a61af45be9a357a9ea7a656c51a2.html" title="自动构建平台jenkins使用">自动构建平台jenkins使用</a></div> <div class="hot-time"><i class="icon-time"></i> 2020-07-27</div> </li> <li> <div class="thumb"><a href="/d27832c83a4f674e4abd0c288bcdc73a.html" title="详解jQuery中的prop()使用方法"><img src="/images/random/tb4.jpg" alt="详解jQuery中的prop()使用方法"/></a></div> <div class="hot-title"><a href="/d27832c83a4f674e4abd0c288bcdc73a.html" title="详解jQuery中的prop()使用方法">详解jQuery中的prop()使用方法</a></div> <div class="hot-time"><i class="icon-time"></i> 2020-10-10</div> </li> <li> <div class="thumb"><a href="/7450367b35f63929c367ba5177eebece.html" title="PHP连接SQLSERVER 注意事项(附dll文件下载)"><img src="/images/random/tb14.jpg" alt="PHP连接SQLSERVER 注意事项(附dll文件下载)"/></a></div> <div class="hot-title"><a href="/7450367b35f63929c367ba5177eebece.html" title="PHP连接SQLSERVER 注意事项(附dll文件下载)">PHP连接SQLSERVER 注意事项(附dll文件下载)</a></div> <div class="hot-time"><i class="icon-time"></i> 2020-10-12</div> </li> <li> <div class="thumb"><a href="/f199a1e391c7ca83f842617a1deb34b0.html" title="vue发送ajax请求详解"><img src="/images/random/tb17.jpg" alt="vue发送ajax请求详解"/></a></div> <div class="hot-title"><a href="/f199a1e391c7ca83f842617a1deb34b0.html" title="vue发送ajax请求详解">vue发送ajax请求详解</a></div> <div class="hot-time"><i class="icon-time"></i> 2020-12-22</div> </li> <li> <div class="thumb"><a href="/0e10857252105e3e6010fdab5fcafa04.html" title="<strong>嘎吱作响Creaks视频流程攻略 全解密过法攻略</strong>"><img src="/uploads/allimg/200727/0H3026410_lit.jpg" alt="<strong>嘎吱作响Creaks视频流程攻略 全解密过法攻略</strong>"/></a></div> <div class="hot-title"><a href="/0e10857252105e3e6010fdab5fcafa04.html" title="<strong>嘎吱作响Creaks视频流程攻略 全解密过法攻略</strong>"><strong>嘎吱作响Creaks视频流程攻略 全解密过法攻略</strong></a></div> <div class="hot-time"><i class="icon-time"></i> 2021-01-24</div> </li> </ul> </section> <section class="widget"> <h3><i class="icon-th-list"></i> 热评文章</h3> <ul class="hot-post"> <li> <div class="thumb"><a href="/pszzg.html" title="vue.js在标签属性中插入变量参数的方法"><img src="/uploads/allimg/200606/1Q9303356_lit.jpg" alt="vue.js在标签属性中插入变量参数的方法"/></a></div> <div class="hot-title"><a href="/pszzg.html" title="vue.js在标签属性中插入变量参数的方法">vue.js在标签属性中插入变量参数的方法</a></div> <div class="hot-time"><i class="icon-time"></i> 2021-04-09</div> </li> <li> <div class="thumb"><a href="/pszwp.html" title="cli 打包时抽离项目相关配置文件详解"><img src="/uploads/allimg/200606/1QU0JK_lit.jpg" alt="cli 打包时抽离项目相关配置文件详解"/></a></div> <div class="hot-title"><a href="/pszwp.html" title="cli 打包时抽离项目相关配置文件详解">cli 打包时抽离项目相关配置文件详解</a></div> <div class="hot-time"><i class="icon-time"></i> 2021-04-09</div> </li> <li> <div class="thumb"><a href="/pszwj.html" title="解决iview打包时UglifyJs报错的问题"><img src="/uploads/allimg/200606/1QP13141_lit.jpg" alt="解决iview打包时UglifyJs报错的问题"/></a></div> <div class="hot-title"><a href="/pszwj.html" title="解决iview打包时UglifyJs报错的问题">解决iview打包时UglifyJs报错的问题</a></div> <div class="hot-time"><i class="icon-time"></i> 2021-04-09</div> </li> <li> <div class="thumb"><a href="/pszww.html" title="<strong>Ubuntu 编译运行C笔记</strong>"><img src="/images/random/tb15.jpg" alt="<strong>Ubuntu 编译运行C笔记</strong>"/></a></div> <div class="hot-title"><a href="/pszww.html" title="<strong>Ubuntu 编译运行C笔记</strong>"><strong>Ubuntu 编译运行C笔记</strong></a></div> <div class="hot-time"><i class="icon-time"></i> 2021-04-09</div> </li> <li> <div class="thumb"><a href="/pszyx.html" title="Android 多线程断点续传下载器"><img src="/uploads/allimg/200606/1Q6126310_lit.png" alt="Android 多线程断点续传下载器"/></a></div> <div class="hot-title"><a href="/pszyx.html" title="Android 多线程断点续传下载器">Android 多线程断点续传下载器</a></div> <div class="hot-time"><i class="icon-time"></i> 2021-04-09</div> </li> </ul> </section> </aside> </div> <footer class="footer"> <div class="foot"> <p>Copyright © 2020 黑区网络 版权所有 longwanglaozi@gmail.com 主题由 <a href="http://www.heiqu.com" title="黑区网络" target="_blank">黑区网络</a> 制作. ICP备案:<a href="https://beian.miit.gov.cn/" target="_blank"> 京ICP备14015190号-4</a></p> <p>友情链接：<a href="http://www.fulingjiang.cn" title="傅令江的个人博客" target="_blank">傅令江的个人博客</a> </p> </div> </footer> <div class="backtop"> <a title="反回顶部"><i class="icon-chevron-up"></i></a> </div> <script type="text/javascript" src="/style/js/leonhere.js"></script> <script type="text/javascript" src="/style/js/jquery.pjax.min.js"></script> <script type="text/javascript" src="/style/js/responsiveslides.min.js"></script> <script type="text/javascript" src="/style/js/jquery.lazyload.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".post .thumb img,.entry img").lazyload({ placeholder : "/style/images/grey.gif", effect : "fadeIn" }); }); </script> <script src="/style/js/refresh.js" type="text/javascript"></script> </body> </html>
