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 相关文章推荐
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
小程序开发基础之view视图容器
Aug 21 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
编写一个javascript元循环求值器的方法
Apr 14 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
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
第四节--构造函数和析构函数
2006/11/16 PHP
PHP中的extract的作用分析
2008/04/09 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
在视频前插入广告
2006/11/20 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
python append、extend与insert的区别
2016/10/13 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
新文化运动的基本口号
2014/06/21 职场文书
宣传普通话标语
2014/06/27 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL