javascript table 列排序

代码

< script language = " javascript " >    
  
// 按列和列数据类型排序表格   
function  sortTable(tableID, iCol, dataType){   
 
     var  docFrag  =  document.createDocumentFragment();     // 创建文档碎片   
 
     var  sortArr  =  getSortTRs(tableID, iCol, dataType);         
  
     for ( var  i = 0 ; i < sortArr.length; i ++ ){            
 
        docFrag.appendChild(sortArr[i]);           
 
  }          
  
    var  oTable  =  document.getElementById(tableID);   
  
   oTable.tBodies[ 0 ].appendChild(docFrag);   
 
    oTable.sortCol  =  iCol;   
  
}          
  
// 返回排序后的行   
function  getSortTRs(tableID, iCol, dataType){   
     var  trArr  =   new  Array;   
     var  oTable  =  document.getElementById(tableID);   
     var  rows  =  oTable.tBodies[ 0 ].rows;   
     for ( var  i = 0 ; i < rows.length; i ++ ){   
        trArr[i]  =  rows[i];   
    }   
    if (oTable.sortCol  ==  iCol){   
       trArr.reverse();   
    } else {   
       trArr.sort(compareTRs(iCol, dataType));   
    }   
     return  trArr;   
}   
function  compareTRs(iCol, dataType){   
     return   function  compare(tr1, tr2){   
        var  value1  =  convert(tr1.cells[iCol].firstChild.nodeValue, dataType);   
        var  value2  =  convert(tr2.cells[iCol].firstChild.nodeValue, dataType);   
 
        if (value1  <  value2){   
             return   - 1 ;   
        } else   if ( value1  >  value2 ){   
            return   1 ;   
        } else {   
             return   0 ;   
       }   
    }          
}   
function  convert(value, dataType){   
    switch (dataType){   
        case   " int " :  return  parseInt(value);   
         case   " float " :    return  parseFloat(value);   
        case   " date " :     return   new  Date(Date.parse(value));   
         default :     return  value.toString();   
        }
        }

< / script>   

代码

  < table  border ="1"  id ="sortTable" >     < thead >   
    < tr  background ="blue" >   
            < td  onmouseover ="javascript:this.style.cursor = 'hand'"  onclick ="sortTable('sortTable', 0, 'string');" > 字符串排序 </ td >           
 
             < td  onmouseover ="javascript:this.style.cursor = 'hand'"  onclick ="sortTable('sortTable', 1, 'int');" > 数字排序 </ td >   
 
         </ tr >   
       </ thead >   
 
        < tr >< td > 李康 </ td >< td > 3 </ td ></ tr >   
 
         < tr >< td > 李洁 </ td >< td > 4 </ td ></ tr >   
 
       < tr >< td > 李康 </ td >< td > 3 </ td ></ tr >   
 
        < tr >< td > 朱敏健 </ td >< td > 8 </ td ></ tr >   
 
       < tr >< td > 朱洁 </ td >< td > 7 </ td ></ tr >   
 
        < tr >< td > 杨乐勇 </ td >< td > 5 </ td ></ tr >   
   
</ table >   

 

 

转载于:https://www.cnblogs.com/zhangqifeng/archive/2011/01/17/1937789.html