JavaScript实现表格排序方法


Posted in Javascript onJune 14, 2013

JavaScript实现表格排序方法

参考代码:

<!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>JavaScript控制网页内表格排序</title> 
<style>  
 *{font-family:Arial, Helvetica, sans-serif;font-size:14px;border:none;} 
 body{text-align:center;} 
 table{margin:100px auto;} 
 td{width:100px;height:24px;text-align:center;line-height:24px;border:1px solid silver;} 
 .red{color:red;} 
 .top{background:#CCCCCC;cursor:pointer;} 
 .up{background:#FFFFCC url(up.gif) no-repeat right 5px;} 
 .down{background:#FFFFCC url(down.gif) no-repeat right 5px;} 
 .hov{background:#F0EFE5;} 
</style> 
</head> 
<body> 
<table cellpadding="0" id="table"> 
 <tr class="top"><td>点击排序</td><td >点击排序</td><td>点击排序</td><td>点击排序</td></tr> 
 <tr> 
   <td><span id="bfn_la_bac.usa">15.43</span></td> 
   <td class="red">700</td> 
   <td>1.220</td> 
   <td class="red">www.corange.cn</td> 
 </tr> 
    <tr><td><span id="bfn_la_c.usa">7.05</span></td> 
  <td class="red">4</td> 
  <td>3,000</td> 
  <td class="red">asp</td> 
    </tr> 
    <tr><td><span id="bfn_la_jpm.usa">30.62</span></td> 
  <td class="red">30</td> 
  <td>2,558,800</td> 
  <td class="red">php</td> 
    </tr> 
    <tr> 
      <td><span id="bfn_la_axp.usa">22.30</span></td> 
  <td class="red">5</td><td>6</td> 
  <td class="red">js</td> 
    </tr> 
    <tr><td><span id="bfn_la_mrk.usa">26.31</span></td> 
  <td class="red">0.6</td><td>5</td> 
  <td class="red">网站开发</td> 
    </tr> 
    <tr><td><span id="bfn_la_pg.usa">63.16</span></td> 
  <td class="red">7</td><td>4</td> 
  <td class="red">子</td> 
    </tr> 
</table> 
<script type="text/javascript">   var tableSort = function(){ 
  this.initialize.apply(this,arguments); 
 } 
 tableSort.prototype = { 
  initialize : function(tableId,clickRow,startRow,endRow,classUp,classDown,selectClass){ 
   this.Table = document.getElementById(tableId); 
   this.rows = this.Table.rows;//所有行 
   this.Tags = this.rows[clickRow-1].cells;//标签td 
   this.up = classUp; 
   this.down = classDown; 
   this.startRow = startRow; 
   this.selectClass = selectClass; 
   this.endRow = (endRow == 999? this.rows.length : endRow); 
   this.T2Arr = this._td2Array();//所有受影响的td的二维数组 
   this.setShow(); 
  }, 
  //设置标签切换 
  setShow:function(){ 
   var defaultClass = this.Tags[0].className; 
   for(var Tag ,i=0;Tag = this.Tags[i];i++){ 
    Tag.index = i; 
    addEventListener(Tag ,'click', Bind(Tag,statu)); 
   } 
   var _this =this; 
   var turn = 0; 
   function statu(){ 
    for(var i=0;i<_this.Tags.length;i++){ 
     _this.Tags[i].className = defaultClass; 
    } 
    if(turn==0){ 
     addClass(this,_this.down) 
     _this.startArray(0,this.index); 
     turn=1; 
    }else{ 
     addClass(this,_this.up) 
     _this.startArray(1,this.index); 
     turn=0; 
    } 
   } 
  }, 
  //设置选中列样式 
  colClassSet:function(num,cla){ 
   //得到关联到的td 
   for(var i= (this.startRow-1);i<(this.endRow);i++){ 
    for(var n=0;n<this.rows[i].cells.length;n++){ 
     removeClass(this.rows[i].cells[n],cla); 
    } 
    addClass(this.rows[i].cells[num],cla); 
   } 
  }, 
  //开始排序  num 根据第几列排序  aord 逆序还是顺序 
  startArray:function(aord,num){ 
   var afterSort = this.sortMethod(this.T2Arr,aord,num);//排序后的二维数组传到排序方法中去 
   this.array2Td(num,afterSort);//输出 
  }, 
  //将受影响的行和列转换成二维数组 
  _td2Array:function(){   
   var arr=[]; 
   for(var i=(this.startRow-1),l=0;i<(this.endRow);i++,l++){ 
    arr[l]=[]; 
    for(var n=0;n<this.rows[i].cells.length;n++){ 
     arr[l].push(this.rows[i].cells[n].innerHTML); 
    } 
   } 
   return arr; 
  }, 
  //根据排序后的二维数组来输出相应的行和列的 innerHTML  
  array2Td:function(num,arr){ 
   this.colClassSet(num,this.selectClass);  
   for(var i= (this.startRow-1),l=0;i<(this.endRow);i++,l++){ 
    for(var n=0;n<this.Tags.length;n++){ 
     this.rows[i].cells[n].innerHTML = arr[l][n];  
    } 
   } 
  }, 
  //传进来一个二维数组,根据二维数组的子项中的w项排序,再返回排序后的二维数组 
  sortMethod:function(arr,aord,w){ 
   //var effectCol = this.getColByNum(whichCol); 
   arr.sort(function(a,b){ 
    x = killHTML(a[w]); 
    y = killHTML(b[w]); 
    x = x.replace(/,/g,''); 
    y = y.replace(/,/g,''); 
    switch (isNaN(x)){ 
     case false: 
     return Number(x) - Number(y); 
     break; 
     case true: 
     return x.localeCompare(y); 
     break; 
    } 
   }); 
   arr = aord==0?arr:arr.reverse(); 
   return arr; 
  } 
 } 
 /*-----------------------------------*/ 
 function addEventListener(o,type,fn){ 
  if(o.attachEvent){o.attachEvent('on'+type,fn)} 
  else if(o.addEventListener){o.addEventListener(type,fn,false)} 
  else{o['on'+type] = fn;} 
 } 
 function hasClass(element, className) {  
  var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');  
  return element.className.match(reg);  
 }  
 function addClass(element, className) {  
  if (!this.hasClass(element, className))  
  {  
   element.className += " "+className;  
  }  
 }  
 function removeClass(element, className) {  
  if (hasClass(element, className)) {  
   var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');  
   element.className = element.className.replace(reg,' ');  
  }  
 }  
 var Bind = function(object, fun) { 
  return function() { 
   return fun.apply(object, arguments); 
  } 
 } 
 //去掉所有的html标记 
 function killHTML(str){ 
  return str.replace(/<[^>]+>/g,""); 
 } 
 //------------------------------------------------ 
 //tableid  第几行是标签行,从第几行开始排序,第几行结束排序(999表示最后) 升序标签样式,降序标签样式  选中列样式 
 //注意标签行的class应该是一致的 
 var ex1 = new tableSort('table',1,2,999,'up','down','hov'); 
</script> 
   
<br><br> 
</body> 
</html>
Javascript 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
node使用promise替代回调函数
May 07 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
微信小程序和百度的语音识别接口详解
May 06 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 #Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 #Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 #Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 #Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 #Javascript
JQuery 操作/获取table具体代码
Jun 13 #Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 #Javascript
You might like
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
vuex 的简单使用
2018/03/22 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
Python常用算法学习基础教程
2017/04/13 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
Python删除n行后的其他行方法
2019/01/28 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
python实现扫雷游戏
2020/03/03 Python
Python调用Redis的示例代码
2020/11/24 Python
挪威手表购物网站:Klokker
2016/09/19 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
工商管理系学生的自我评价分享
2013/11/29 职场文书
办公室前台岗位职责范本
2013/12/10 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
营销经理工作检讨书
2014/11/03 职场文书
2014年团支书工作总结
2014/11/14 职场文书
爱晚亭导游词
2015/02/09 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
python自动化八大定位元素讲解
2021/07/09 Python