快捷導(dǎo)航

js 靜態(tài)HTML表格排序功能實現(xiàn)

更新時間：2009年02月11日 09:57:36 作者：

對于對于一些表格按價格等進(jìn)行排序，方便用戶對當(dāng)前頁面的高低價格排序，用戶體驗性好

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標(biāo)題文檔</title> <style> *{font-family:Arial, Helvetica, sans-serif;font-size:14px;border:none;} body{text-align:center;} table{margin:100px auto;} td{width:100px;height:24px;text-align:center;line-height:24px;border:1px solid silver;} .red{color:red;} .top{background:#CCCCCC;cursor:pointer;} .up{background:#FFFFCC url(/upload/20090211095733175.gif) no-repeat right 5px;} .down{background:#FFFFCC url(/upload/20090211095734843.gif) no-repeat right 5px;} .hov{background:#F0EFE5;} </style> </head> <body> <table cellpadding="0" id="table"> <tr class="top"><td>kick me</td><td >kick me</td><td>kick me</td><td>kick me</td></tr> <tr> <td><span id="bfn_la_bac.usa">15.43</span></td> <td class="red">700</td> <td>1.220</td> <td class="red">阿</td> </tr> <tr><td><span id="bfn_la_c.usa">7.05</span></td> <td class="red">4</td> <td>3,000</td> <td class="red">炳</td> </tr> <tr><td><span id="bfn_la_jpm.usa">30.62</span></td> <td class="red">30</td> <td>2,558,800</td> <td class="red">和</td> </tr> <tr> <td><span id="bfn_la_axp.usa">22.30</span></td> <td class="red">5</td><td>6</td> <td class="red">瞎</td> </tr> <tr><td><span id="bfn_la_mrk.usa">26.31</span></td> <td class="red">0.6</td><td>5</td> <td class="red">-</td> </tr> <tr><td><span id="bfn_la_pg.usa">63.16</span></td> <td class="red">7</td><td>4</td> <td class="red">子</td> </tr> </table>  </body> </html>

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

您可能感興趣的文章:

相關(guān)文章

微信小程序頁面渲染實現(xiàn)方法
這篇文章主要介紹了微信小程序頁面渲染實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-11-11
談一談javascript閉包
這篇文章主要介紹了javascript閉包，閉包（closure）是Javascript語言的一個難點，也是它的特色，很多高級應(yīng)用都要依靠閉包實現(xiàn)，感興趣的小伙伴們可以參考一下
2016-01-01
javascript實現(xiàn)的網(wǎng)站訪問量統(tǒng)計代碼
本文文章通過兩段代碼實例給大家介紹了基于javascript實現(xiàn)網(wǎng)站訪問量統(tǒng)計代碼，對js實現(xiàn)網(wǎng)站訪問量統(tǒng)計相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
Javascript中typeof 用法小結(jié)
JavaScript中的typeof其實非常復(fù)雜,他有六種返回的數(shù)據(jù)類型，它可以用來做很多事情,但同時也有很多怪異的表現(xiàn).本文列舉出了它的多個用法,有需要的小伙伴可以參考下。
2015-05-05
JS實現(xiàn)多功能計算器
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)多功能計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-10-10
javascript實現(xiàn)數(shù)組去重的多種方法
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)數(shù)組去重的多種方法，感興趣的小伙伴們可以參考一下
2016-03-03
amd、cmd、esmodule、commonjs區(qū)別詳解
本文主要介紹了amd、cmd、esmodule、commonjs區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
redux.js詳解及基本使用
Redux我們可以把它理解成一個狀態(tài)管理器，可以把狀態(tài)（數(shù)據(jù)）存在Redux中，以便增、刪、改。這篇文章主要介紹了redux.js詳解及基本使用,需要的朋友可以參考下
2019-05-05
隨窗體滑動的小插件sticky源碼
隨窗體滑動的小插件sticky源碼，需要的朋友可以參考一下
2013-06-06
html的DOM中document對象anchors集合用法實例
這篇文章主要介紹了html的DOM中document對象anchors集合用法,實例分析了anchors集合的功能及使用技巧,需要的朋友可以參考下
2015-01-01