JS學(xué)習(xí)之表格的排序簡(jiǎn)單實(shí)例
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)文章
通過(guò)隱藏iframe實(shí)現(xiàn)無(wú)刷新上傳文件操作
本文給大家介紹iframe無(wú)刷新上傳文件,通過(guò)一個(gè)隱藏的iframe來(lái)處理上傳操作我采用的是ReactJS,amazeui,nodejs1.html target指向iframe的name,就是把上傳后的操作交給iframe來(lái)處理2016-03-03webpack使用及如何搭建cesium三維地球環(huán)境
這篇文章主要介紹了webpack快速上手之搭建cesium三維地球環(huán)境,本文使用的是webpack5,webpack5 升級(jí)后默認(rèn)是不支持polyfill的,編譯時(shí)會(huì)報(bào)錯(cuò),本文主要介紹了Cesium以及Webpack的使用,如何將Cesium一步步地集成到Webpack中,需要的朋友可以參考下2023-11-11js實(shí)現(xiàn)鼠標(biāo)跟隨運(yùn)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)跟隨運(yùn)動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09JavaScript解構(gòu)賦值的實(shí)用技巧指南
JavaScript解構(gòu)賦值為我們提供了很多方便,但是用法比較多,本文就來(lái)梳理一下,下面這篇文章主要給大家介紹了關(guān)于JavaScript解構(gòu)賦值的實(shí)用技巧指南,需要的朋友可以參考下2022-01-01基于JavaScript實(shí)現(xiàn)交互式博客
在Web開(kāi)發(fā)中,JavaScript(JS)是一種至關(guān)重要的編程語(yǔ)言,它使網(wǎng)頁(yè)具有交互性,本文主要介紹了如何使用JavaScript實(shí)現(xiàn)一個(gè)交互式博客,需要的可以了解下2024-01-01js實(shí)現(xiàn)圖片放大并跟隨鼠標(biāo)移動(dòng)特效
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片放大并跟隨鼠標(biāo)移動(dòng)特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01JS題解leetcode去掉最低工資和最高工資后的工資平均值
這篇文章主要為大家介紹了JS題解leetcode去掉最低工資和最高工資后的工資平均值,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12