JavaScript实现表格排序方法

225 阅读 0 评论 149 点赞

我是靠谱客的博主甜甜花瓣，最近开发中收集的这篇文章主要介绍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> 