close
▌完成結果如下：
▌本篇適於有網頁 & JavaScript 開發基礎的人學習，如果沒有網頁開發基礎，建議你打好基礎再來看
學習路線 HTML & CSS >> JSP or ASP or PHP >> JavaScript >> jQuery
▌比較一下有使用和沒使用的差別，美化了表格，還多了動態排序功能
▌首先去 Tablesorter官方網 下載最新 我是用2.15.14
▌可以看到檔案的結構 css 為樣式 ， js 為 Tablesorter 核心檔案
▌這裡使用JSP，建立一個JSP網頁，<head>中加入jquery 和 Tablesorter， 注意 jquery 一定要在前面 !!
▌在<body> 中加入如下表格
▌在<head> 中加入 jquery 代碼，可以支援排序
▌完成後執行，就可以看到如下畫面了，是不是方便、快速、美化呢
▌不只有那一個樣式，如果我想換別的呢
▌開啟目錄 /tablesorter-master/css 裡面有很多樣式
▌這邊示範修改樣式為 theme.blue.css
▌修改<head> 關於樣式的程式碼
▌開啟 theme.blue.css 發現控制的class是 .tablesorter-blue
▌回到JSP中，修改 table 的 class 為 tablesorter-blue
▌完成修改樣式，其他樣式修改也都大同小異，不多贅述
▌Tablesorter官方 也有很多例子，有興趣可以去看看
▌參考網站
▌所有資源作為教學用，無任何商業用途!!
歡迎轉載，但務必註明出處!!
全站熱搜
留言列表
