根據(jù)表格中的某一列進(jìn)行排序的javascript代碼
更新時間：2013年11月29日 15:51:48 作者：
根據(jù)表格中的某一列進(jìn)行排序的實現(xiàn)方法有很多，下面為大家介紹下如何使用js來簡單實現(xiàn)下，需要的朋友不要錯過
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var b = true ;
function sortAge(){
var tabNode = document.getElementsByTagName("table")[0];
var trNodes = tabNode.rows; //獲取表格中的行對象
var arr = new Array();
for(var x=1;x<trNodes.length;x++){ //臨時容器存入的是表格中行對象的引用
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>長沙</td>
</tr>
</table>
</body>
您可能感興趣的文章:
- JS實現(xiàn)的表格操作類詳解(添加，刪除，排序，上移，下移)
- javascript實現(xiàn)對表格元素進(jìn)行排序操作
- JavaScript對表格或元素按文本，數(shù)字或日期排序的方法
- JavaScript實現(xiàn)表格點擊排序的方法
- javascript操作表格排序?qū)嵗治?/a>
- js表格排序?qū)嵗治觯ㄖС謎nt,float,date,string四種數(shù)據(jù)類型）
- javascript實現(xiàn)表格排序 編輯 拖拽 縮放
- js實現(xiàn)表格字段排序
- javascript 表格內(nèi)容排序 簡單操作示例代碼
- JavaScript實現(xiàn)表格排序方法
- javascript-表格排序(降序/反序)實現(xiàn)介紹(附圖)
- javascript多種數(shù)據(jù)類型表格排序代碼分析
- JS學(xué)習(xí)之表格的排序簡單實例
相關(guān)文章
這篇文章主要介紹了js+div實現(xiàn)文字滾動和圖片切換效果代碼,涉及javascript鼠標(biāo)事件及頁面元素圖片滾動效果實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
支付寶小程序自定義彈窗dialog插件的實現(xiàn)代碼
支付寶小程序官方提供的alert提示框、dialog對話框、model彈窗功能比較有限，有些都不能隨意自定義修改的。這篇文章主要介紹了支付寶小程序自定義彈窗dialog插件的實現(xiàn)代碼,需要的朋友可以參考下2018-11-11
JavaScript 驗證碼的實例代碼(附效果圖)，需要的朋友可以參考一下2013-03-03
MinIO是一款基于Go語言的高性能對象存儲服務(wù),非常適合于存儲大容量非結(jié)構(gòu)化的數(shù)據(jù),例如圖片、視頻、日志文件、備份數(shù)據(jù)和容器/虛擬機(jī)鏡像等,這篇文章主要給大家介紹了關(guān)于前端使用minio傳輸文件的相關(guān)資料,需要的朋友可以參考下2024-07-07
輕松實現(xiàn)HTML和JS之間的轉(zhuǎn)化的代碼
輕松實現(xiàn)HTML和JS之間的轉(zhuǎn)化的代碼...2007-09-09
uniapp中uni.navigateBack返回后刷新頁面數(shù)據(jù)的實現(xiàn)
本文主要介紹了uniapp中uni.navigateBack返回后刷新頁面數(shù)據(jù)的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
這篇文章介紹了js圖片隨機(jī)不定向浮動的實現(xiàn)代碼，有需要的朋友可以參考一下2013-07-07
淺析JavaScript中的同名標(biāo)識符優(yōu)先級
這篇文章主要介紹了JavaScript中的同名標(biāo)識符優(yōu)先級。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了使用 Opentype.js 生成字體子集,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
這篇文章主要介紹了小程序跳轉(zhuǎn)H5頁面的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03