 
function SortTable(sTableID, iCol, sDataType){ 
this.oTable=document.getElementById(sTableID); 
this.oTBody=this.oTable.tBodies[0]; 
this.colDataRows=this.oTBody.rows; 
this.aTRs=[]; 
this.iCol=iCol; 
this.sDataType=sDataType; 
} 
SortTable.prototype={ 
convert:function(sValue, sDataType){ 
switch(sDataType){ 
case "int": 
return parseInt(sValue); 
case "float": 
return parseFloat(sValue); 
case "date": 
return new Date(sValue); 
default: 
return sValue.toString(); 
} 
}, 
generateCompareTRs:function(iCol, sDataType, that){ 
return function compareTRs(oTR1,oTR2){ 
var vValue1= that.convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType), 
vValue2= that.convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType); 
if(vValue1 < vValue2){ 
return -1; 
} else if(vValue1 > vValue2){ 
return 1; 
} else{ 
return 0; 
} 
}; 
}, 
sort:function(){ 
for(var i=0,l=this.colDataRows.length;i<l;i++){ 
this.aTRs.push(this.colDataRows[i]); 
} 
if(this.oTable.sortCol === this.iCol){ 
this.aTRs.reverse(); 
} else { 
this.aTRs.sort(this.generateCompareTRs(this.iCol, this.sDataType, this)); 
} 
var oFragment=document.createDocumentFragment(); 
for(var i=0,l=this.aTRs.length;i<l;i++){ 
oFragment.appendChild(this.aTRs[i]); 
} 
this.oTBody.appendChild(oFragment); 
this.oTable.sortCol = this.iCol; 
} 
} 

調(diào)用示例

復(fù)制代碼代碼如下:

 
function bindSortTable(sTableID, iCol, sDataType){ 
var table=document.getElementById(sTableID), 
ftr=table.tHead.rows[0], 
tds=ftr.cells; 
if(tds[iCol]){ 
tds[iCol].onclick=function(){ 
var sortTable=new SortTable(sTableID, iCol, sDataType); 
sortTable.sort(); 
} 
} 
} 
window.onload=function(){ 
bindSortTable("tblSort",0); 
bindSortTable("tblSort",1); 
bindSortTable("tblSort",2,"int"); 
bindSortTable("tblSort",3,"float"); 
bindSortTable("tblSort",4,"date"); 
} 

完整Demo:

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

作者：Artwl
出處：http://artwl.cnblogs.com

您可能感興趣的文章:

js表格排序

相關(guān)文章

js實(shí)現(xiàn)具有高亮顯示效果的多級(jí)菜單代碼
這篇文章主要介紹了js實(shí)現(xiàn)具有高亮顯示效果的多級(jí)菜單,涉及javascript針對(duì)cookie的調(diào)用及頁面元素樣式的動(dòng)態(tài)變換技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
微信小程序?qū)崿F(xiàn)星星評(píng)分效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星星評(píng)分效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
微信小程序?qū)崿F(xiàn)組件頂端固定或底端固定效果(不隨滾動(dòng)而滾動(dòng))
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)組件頂端固定或底端固定效果(不隨滾動(dòng)而滾動(dòng))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
JavaScript輸出斐波那契數(shù)列的實(shí)現(xiàn)方法
斐波那契數(shù)列來源于兔子繁殖問題,所以也叫兔子序列,下面這篇文章主要給大家介紹了關(guān)于JavaScript輸出斐波那契數(shù)列的實(shí)現(xiàn)方法,需要的朋友可以參考下
2021-06-06
js實(shí)現(xiàn)無縫輪播圖效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無縫輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
webpack拆分壓縮css并以link導(dǎo)入的操作步驟
我們運(yùn)行打包后會(huì)發(fā)現(xiàn)less轉(zhuǎn)為了css文件，但css文件確通過js加入style標(biāo)簽，下面我們將css進(jìn)行拆分出來，并以link標(biāo)簽引入，具體實(shí)現(xiàn)步驟一起看看吧
2021-10-10
微信小程序js時(shí)間戳與日期格式的轉(zhuǎn)換方法
這篇文章主要給大家介紹了關(guān)于微信小程序js時(shí)間戳與日期格式的轉(zhuǎn)換方法,在小程序中使用時(shí)間選擇器時(shí),獲取到的時(shí)間可能是一個(gè)時(shí)間戳,這并不是我們想要的,這時(shí)候我們得將獲取到的時(shí)間戳進(jìn)行轉(zhuǎn)換,需要的朋友可以參考下
2023-10-10
js判斷iframe中元素是否存在的實(shí)現(xiàn)代碼
這篇文章主要介紹了js判斷iframe中元素是否存在的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2016-12-12
JavaScript如何輸出楊輝三角
這篇文章主要介紹了JavaScript如何輸出楊輝三角問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
js中使用DOM復(fù)制（克隆）指定節(jié)點(diǎn)名數(shù)據(jù)到新的XML文件中的代碼
使用DOM復(fù)制（克?。┲付ü?jié)點(diǎn)名數(shù)據(jù)到新的XML文件中 ,用到三個(gè)類的相關(guān)知識(shí)點(diǎn) ： DOMDocument - DOMNodeList - DOMNode
2011-07-07