根據(jù)表格中的某一列進(jìn)行排序的javascript代碼

更新時(shí)間：2013年11月29日 15:51:48 作者：

根據(jù)表格中的某一列進(jìn)行排序的實(shí)現(xiàn)方法有很多，下面為大家介紹下如何使用js來(lái)簡(jiǎn)單實(shí)現(xiàn)下，需要的朋友不要錯(cuò)過(guò)

 
<script type="text/javascript"> 
var b = true ; 
function sortAge(){ 
var tabNode = document.getElementsByTagName("table")[0]; 
var trNodes = tabNode.rows; //獲取表格中的行對(duì)象 
var arr = new Array(); 
for(var x=1;x<trNodes.length;x++){ //臨時(shí)容器存入的是表格中行對(duì)象的引用 
arr[x-1] = trNodes[x]; 
} 
sort(arr); 
var tbdNode = tabNode.childNodes[0]; 
if(b){ //if....else...控制按年齡的升降進(jìn)行排序 
for(var x=0;x<arr.length;x++){ 
tbdNode.appendChild(arr[x]); 
} 
b = false; 
}else{ 
for(var x=arr.length-1;x>=0;x--){ 
tbdNode.appendChild(arr[x]); 
} 
b = true ; 
} 
} 
function sort(arr){ // 排序 
for(var x=0;x<arr.length;x++){ 
for(var y=x+1;y<arr.length;y++){ 
if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText)){ // 不進(jìn)行parseInt轉(zhuǎn)換是以字符串的ASCII比較 
var temp = arr[x]; 
arr[x] = arr[y]; 
arr[y] = temp; 
} 
} 
} 
} 
</script> 

<style type="text/css"> 
table{ width:60%; border:solid 1px #0066FF;} 
table td {border:solid 1px #0099ff;} 
a{ text-decoration: none;} 
</style> 

</head> 
<body> 
<table> 
<tr> 
<td>姓名</td><td><a href="javascript:void(0)" onclick="sortAge()">年齡</a></td><td>地址</td> 
</tr> 
<tr> 
<td>張三</td><td>23</td><td>北京</td> 
</tr> 
<tr> 
<td>李四</td><td>25</td><td>上海</td> 
</tr> 
<tr> 
<td>王五</td><td>15</td><td>廣州</td> 
</tr> 
<tr> 
<td>唐總</td><td>20</td><td>長(zhǎng)沙</td> 
</tr> 
</table> 
</body> 

您可能感興趣的文章:

相關(guān)文章

js+div實(shí)現(xiàn)文字滾動(dòng)和圖片切換效果代碼
這篇文章主要介紹了js+div實(shí)現(xiàn)文字滾動(dòng)和圖片切換效果代碼,涉及javascript鼠標(biāo)事件及頁(yè)面元素圖片滾動(dòng)效果實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
支付寶小程序自定義彈窗dialog插件的實(shí)現(xiàn)代碼
支付寶小程序官方提供的alert提示框、dialog對(duì)話框、model彈窗功能比較有限，有些都不能隨意自定義修改的。這篇文章主要介紹了支付寶小程序自定義彈窗dialog插件的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2018-11-11
JavaScript 驗(yàn)證碼的實(shí)例代碼(附效果圖)
JavaScript 驗(yàn)證碼的實(shí)例代碼(附效果圖)，需要的朋友可以參考一下
2013-03-03
前端使用minio傳輸文件的代碼及拓展
MinIO是一款基于Go語(yǔ)言的高性能對(duì)象存儲(chǔ)服務(wù),非常適合于存儲(chǔ)大容量非結(jié)構(gòu)化的數(shù)據(jù),例如圖片、視頻、日志文件、備份數(shù)據(jù)和容器/虛擬機(jī)鏡像等,這篇文章主要給大家介紹了關(guān)于前端使用minio傳輸文件的相關(guān)資料,需要的朋友可以參考下
2024-07-07
輕松實(shí)現(xiàn)HTML和JS之間的轉(zhuǎn)化的代碼
輕松實(shí)現(xiàn)HTML和JS之間的轉(zhuǎn)化的代碼...
2007-09-09
uniapp中uni.navigateBack返回后刷新頁(yè)面數(shù)據(jù)的實(shí)現(xiàn)
本文主要介紹了uniapp中uni.navigateBack返回后刷新頁(yè)面數(shù)據(jù)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-11-11
js 圖片隨機(jī)不定向浮動(dòng)的實(shí)現(xiàn)代碼
這篇文章介紹了js圖片隨機(jī)不定向浮動(dòng)的實(shí)現(xiàn)代碼，有需要的朋友可以參考一下
2013-07-07
淺析JavaScript中的同名標(biāo)識(shí)符優(yōu)先級(jí)
這篇文章主要介紹了JavaScript中的同名標(biāo)識(shí)符優(yōu)先級(jí)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
使用 Opentype.js 生成字體子集的實(shí)例代碼詳解
這篇文章主要介紹了使用 Opentype.js 生成字體子集,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-05-05
小程序跳轉(zhuǎn)H5頁(yè)面的方法步驟
這篇文章主要介紹了小程序跳轉(zhuǎn)H5頁(yè)面的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03