<HTML>
<HEAD>
<TITLE>JS實現table列排序</TITLE>
<script>
//調用比較函數
function sortTable(id,rowNum){
var oTable = document.getElementById(id);//獲取以id爲id的table對象
var oTbody = oTable.tBodies[0];//獲取第一個tBody
var oRows = oTbody.rows;//獲取tBody的所有的行
var aTRs = new Array;//新建一個數組
for (var i=0;i < oRows.length ;i++ ){
aTRs[i] = oRows[i];//循環將所有行換到新的數組
}
aTRs.sort( function(oTR1,oTR2){
var s1 = oTR1.cells[rowNum].firstChild.nodeValue;//比較行的內容的值
var s2 = oTR2.cells[rowNum].firstChild.nodeValue;//比較行的內容的值
return parseInt(s1)-parseInt(s2);//進行比較
});//對數組進行比較,是通過新的數組的行比較
var otemp = document.createDocumentFragment();//創建文檔碎片
for (var i = 0;i<aTRs.length ;i++ ){
otemp.appendChild(aTRs[i]);//分別將每行加入到文檔碎片中
}
oTbody.appendChild(otemp);//將文檔碎片添加到文檔中
}
</script>
</HEAD>
<BODY>
<table id="t" >
<thead>
<tr>
<button onclick = "sortTable('t',0);">按照第一列排序</button>
<button onclick = "sortTable('t',1);">按照第二列排序</button>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>1</td></tr>
<tr><td>10</td><td>6</td></tr>
<tr><td>3</td><td>5</td></tr>
<tr><td>5</td><td>4</td></tr>
<tr><td>2</td><td>3</td></tr>
<tr><td>9</td><td>9</td></tr>
</tbody>
</BODY>
</HTML>JS實現table列排序
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章