javascript table 列排序

來源:互聯網
上載者:User
代碼

<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>  

 


 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.