JS學(xué)習(xí)之表格的排序簡(jiǎn)單實(shí)例
更新時(shí)間：2016年05月16日 14:53:09 投稿：jingxian
下面小編就為大家?guī)?lái)一篇JS學(xué)習(xí)之表格的排序簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧
JS學(xué)習(xí)之表格的排序簡(jiǎn)單實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="btn1" type="button" value="排序">
<table id="tab1" width="200" border="1" cellpadding="14">
<thead>
<td>序號(hào)</td>
<td>姓名</td>
<td>年齡</td>
</thead>
<tbody>
<tr>
<td>2</td>
<td>張三</td>
<td>20</td>
</tr>
<tr>
<td>4</td>
<td>李四</td>
<td>25</td>
</tr>
<tr>
<td>3</td>
<td>趙龍</td>
<td>30</td>
</tr>
<tr>
<td>1</td>
<td>孫河</td>
<td>21</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
var arr=[]
for(i=0;i<oTab.tBodies[0].rows.length;i++){
arr[i]=oTab.tBodies[0].rows[i];
}
arr.sort(function(tr1,tr2){
var n1=parseInt(tr1.cells[0].innerHTML);
var n2=parseInt(tr2.cells[0].innerHTML);
return n1-n2;
})
for(i=0;i<arr.length;i++){
oTab.tBodies[0].appendChild(arr[i])
}
}
</script>
</body>
</html>
以上這篇JS學(xué)習(xí)之表格的排序簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript對(duì)象數(shù)組排序?qū)嵗椒\析
- JavaScript對(duì)象數(shù)組如何按指定屬性和排序方向進(jìn)行排序
- JavaScript sort數(shù)組排序方法和自我實(shí)現(xiàn)排序方法小結(jié)
- 基于JS實(shí)現(xiàn)數(shù)字+字母+中文的混合排序方法
- 分享javascript實(shí)現(xiàn)的冒泡排序代碼并優(yōu)化
- 深入理解js數(shù)組的sort排序
- JS實(shí)現(xiàn)table表格數(shù)據(jù)排序功能(可支持動(dòng)態(tài)數(shù)據(jù)+分頁(yè)效果)
- JavaScript實(shí)現(xiàn)in-place思想的快速排序方法
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)詳情頁(yè)放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
關(guān)于自定義Egg.js的請(qǐng)求級(jí)別日志詳解
這篇文章主要給大家介紹了關(guān)于自定義Egg.js的請(qǐng)求級(jí)別日志的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
JS如何獲取瀏覽器聲音、麥克風(fēng)以及通知權(quán)限
在我們開發(fā)網(wǎng)頁(yè)的時(shí)候偶爾會(huì)有需要用戶錄音的情況,下面這篇文章主要給大家介紹了關(guān)于JS如何獲取瀏覽器聲音、麥克風(fēng)以及通知權(quán)限的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
這篇文章主要介紹了JavaScript事件類型中UI事件詳解的相關(guān)資料,需要的朋友可以參考下2016-01-01
利用Vconsole和Fillder進(jìn)行移動(dòng)端抓包調(diào)試方法
這篇文章主要介紹了利用Vconsole和Fillder進(jìn)行移動(dòng)端抓包調(diào)試，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
js實(shí)現(xiàn)數(shù)組轉(zhuǎn)樹示例
這篇文章主要為大家介紹了js實(shí)現(xiàn)數(shù)組轉(zhuǎn)樹示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
javascript設(shè)計(jì)模式 – 觀察者模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 觀察者模式,結(jié)合實(shí)例形式分析了javascript觀察者模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
JavaScript操作XML實(shí)例代碼（獲取新聞標(biāo)題并分頁(yè)，并分頁(yè)）
XML 代碼部分 這是一個(gè)新聞的XML 文件，如果 NBody部分包含 XML 和Html 不可識(shí)別部分， 就 包含在DATA 表示附中。2010-05-05
javascript代碼在ie8里報(bào)錯(cuò) document.getElementById(...) 為空或不是對(duì)象的解決方
今天更升級(jí)了ie8,發(fā)現(xiàn)原來(lái)在ie7下可以運(yùn)行的代碼，不能運(yùn)行了，發(fā)現(xiàn)了一些細(xì)節(jié)，附臨時(shí)修改辦法。2009-11-11
JSON基本語(yǔ)法及與JavaScript的異同實(shí)例分析
這篇文章主要介紹了JSON基本語(yǔ)法及與JavaScript的異同,結(jié)合實(shí)例形式分析了json簡(jiǎn)單值、對(duì)象、數(shù)組三種類型值使用技巧,需要的朋友可以參考下2019-01-01