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 相关文章推荐
Js 刷新框架页的代码
Apr 13 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
Three.js基础部分学习
Jan 08 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
Node.js笔记之process模块解读
May 31 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 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
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
使用PHP编写的SVN类
2013/07/18 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
Python中类的继承代码实例
2014/10/28 Python
理论讲解python多进程并发编程
2018/02/09 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
运动会开幕式主持词
2014/03/28 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
说明书格式及范文
2014/05/07 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS