web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置：
首页
>
网页特效
>
表格
基于bootstrap的表格头固定jquery插件
分类：
表格
日期：
2024-05-14
点击(9)
评论(0)
演 示
免费下载
简介
在页面中引入jquery、bootstrap-affix.js和jquery.decapitate.js文件。 ```html <script src="path/to/js/jquery.min.js"></script> <script src="path/to/js/bootstrap-affix.js"></script> <script src="path/to/js/jquery.decapitate.js"></script> ``` ##### HTML结构 HTML结构 该插件的原理是将原来表格的thead元素分离出来，将它们移动到新的表格中。初始的表格结构如下： ```html <table id="foo"> <caption></caption> <thead> <tr>...</tr> </thead> <tbody> <tr>...</tr> </tbody> </table> ``` 在经过插件初始化之后，表格的结构变为下面的样子： ```html <div id="foo-wrapper" class="decap-body-wrapper"> <div class="decap-head-wrapper"> <table class="decap-head"> <caption> <thead> <tr>...</tr> </thead> </table> </div> <table id="foo" class="decap-body"> <tbody> <tr>...</tr> </tbody> </table> </div> ``` ##### 初始化插件 在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该jquery表格固定插件。 ```html $(document).ready(function() { $('table').decapitate(); }); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告
