JS实现HTML表格排序功能

本文实例为大家分享了Javascript实现HTML表格排序功能，供大家参考，具体内容如下

HTML代码：

    

      
click me
      
click me
      
click me
      
click me
    
    

      

 15.43
      
      
700
      
1.220
      
阿
    
    

      

 7.05
      
      
4
      
3,000
      
炳
    
    

      

 30.62
      
      
30
      
2,558,800
      
和
    
    

      

 22.30
      
      
5
      
6
      
瞎
    
    

      

 26.31
      
      
0.6
      
5
      
-
    
    

      

 63.16
      
      
7
      
4
      
子
    
  

JavaScirpt代码：

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]+>/g,""); 
} 
//------------------------------------------------ 
//tableid 第几行是标签行，从第几行开始排序，第几行结束排序(999表示最后) 升序标签样式，降序标签样式 选中列样式 
//注意标签行的class应该是一致的 
var ex1 = new tableSort('table',1,2,999,'up','down','hov');

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。