[Javascript] 讓你網頁上的表格也能自動排序

發表: 2008-05-09 09:00 分類: Javascript, 程式語言 | 6 則迴響 » | 瀏覽:14,390 人次

常使用網頁的表格來顯示資料的玩家們,是不是常會覺得:「要是表格的欄位也能讓使用者點選來自動排序就好了!」。現在,你不需要另外用動態網頁語言去撰寫複雜(如PHP, ASP, JSP…)的程式碼,只要再網頁中掛上一個只有17KB的Javascript程式,然後簡單修改一下網頁內容,就能讓你網頁中每個表格的欄位都能排序喔!快來試試看吧!

image

網頁中的表格裡面的文字、數字都是死的,無法讓我們選擇欄位來排序,除非你使用一些動態語言,得花好一番工夫才有辦法搞定一個能動態排序的表格。現在有了「sorttable」這支Javascript小程式,可以輕鬆讓你建立動態排序的表格,不需要程式設計的基礎也能用喔~

sorttable:
官方網站:http://www.kryogenix.org/code/browser/sorttable/
下載點:http://www.kryogenix.org/code/browser/sorttable/sorttable.js

使用方式

  1. 先下載檔案(sorttable.js)到網頁所在的資料夾
  2. 編輯網頁的<head>標籤,加入:
    <script src="sorttable.js"></script>
    <style type="text/css">
    /* Sortable tables */
    table.sortable thead {
        background-color:#eee;
        color:#666666;
        font-weight: bold;
        cursor: default;
    }
    </style>
  3. 修改表格的<table>標籤,後面加上class=”sortable” ,成為:
    <table class="sortable">
  4. 存檔,大功告成!  怎麼樣,簡單吧!

範例

下面是我做的範例檔(如無法正常顯示請記得開放iframe功能):

只要點選表格的欄位名稱,就可以選擇升冪或降冪排序了,很讚吧!

使用限制

因該程式是外國人設計的,所以並不能排序中文的數字,請使用者注意。

喜歡本站的文章嗎?
歡迎大家按個「讚」給我鼓勵一下吧!




相似文章




喜歡㊣軟體玩家的文章嗎?歡迎加入《軟體玩家FB粉絲團》吧!
或是按下<這邊>來訂閱RSS!


隨機文章

迴響:

歡迎留下您的意見!


※PS: 因為阿正老師時間有限,且本站所介紹的軟體種類太多(所產生的狀況也很多),可能無法回答一一回答讀者們的問題(尤其像是出現某某錯誤訊息,或者操作過程中哪邊卡住),您可以先上Google搜尋相關的關鍵字,或是到軟體的官方網站/論壇來爬文,不便之處還請見諒。
※PS:本站不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取該類檔案。
※PS:本站因採用反向代理(Reverse Proxy)技術,留言後必須等到20分鐘後快取網頁過期才會顯示。