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字符串String和Array操作的有趣方法
Dec 18 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 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创建PDF中文文档
2006/10/09 PHP
Get或Post提交值的非法数据处理
2006/10/09 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
JQuery中操作Css样式的方法
2014/02/12 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
详解redux异步操作实践
2018/08/15 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
解析python实现Lasso回归
2019/09/11 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
高二学生评语大全
2014/04/25 职场文书
爱祖国演讲稿
2014/05/04 职场文书
文体活动总结范文
2014/05/05 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
Redis三种集群模式详解
2021/10/05 Redis