首頁 > web前端 > js教程 > 主體

實例分享jQuery實作表格凍結頂欄效果

小云云
發布: 2017-12-30 15:16:43
原創
1990 人瀏覽過

不知道大家對表格凍結頂欄的效果有多少了解。本文主要介紹了jQuery實現表格凍結頂欄效果 ,需要的朋友可以參考下,希望能幫助大家。

這樣的效果不算是很難,但是實現起來確實挺麻煩的,這裡的難點就不多說了,就是這個效果一下子弄到一點多,最後在我常逛的網站裡找到了答案。

原問題的網址:https://segmentfault.com/q/1010000000130774

這裡介紹這個小外掛的用法。首先先去著名'同性‘交往網站github裡把程式碼下載下來。解壓縮後是這樣的:

主要用到是我紅色框框裡的,也可以看人家的原始碼。這裡只要引用js就可以了,然後在table和thead這兩個標籤裡加上圖裡的兩個類別:

#然後就是加上這段js:

##就是紅色框框裡的話。然後就可以出效果了。

但是,有的人可能沒有出效果,不要慌,按下F12,看看錯誤訊息,我的錯誤訊息是有個.size沒有定義這個方法,這時候把這段js給換一下就可以:

然後就可以實現效果啦!可能有人會覺得好煩啊,你這全是圖片,我想直接複製沒都沒辦法複製,但是我覺得很多東西自己看一遍跟自己真正寫出來是有差距的,希望大家能夠去真正寫一下,不過又想到昨晚我弄點一點的,眼都不想睜開了,哪有功夫再寫呀,所以我還是把我圖片的東西給用打出來吧,好讓大家能夠複製:

table 裡的類別

class="table-fixed-header"

thead 裡的類別

class='header'

要加入的js:

$('.table-fixed-header').fixedHeader();##相關推薦:

PHPExcel實作凍結鎖定表頭的方法介紹

Bootstrap Table的凍結列功能之解決高度問題

HTML上做表單頁面上的開啟和凍結切換以及功能實現

以上是實例分享jQuery實作表格凍結頂欄效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!