zoukankan      html  css  js  c++  java
  • 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>  

  • 相关阅读:
    centos7开启关闭防火墙
    虚拟机vmnet1和vmnet8找不到,注册表没有删除干净,见图
    dhcp和static的区别
    SQL手册
    canal架构原理
    SQL优化(待完善)
    数仓简介
    java逆变与协变(待完善)
    mysqljoin的原理和优化
    深入理解java虚拟机阅读笔记
  • 原文地址:https://www.cnblogs.com/zhangqifeng/p/1937789.html
Copyright © 2011-2022 走看看