jQuery实现表格冻结顶栏效果
更新时间：2017年08月20日 10:00:15 作者：silinpper
昨天晚上公司遇到个小需求，就是实现类似表格冻结顶栏的效果。这篇文章主要介绍了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();
总结
以上所述是小编给大家介绍的jQuery实现表格冻结顶栏效果，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章:
相关文章
下面小编就为大家分享一篇select获取下拉框的值 下拉框默认选中方法，具有很好的参考价值，希望对的有所帮助。一起跟随小编过来看看吧2018-02-02
Jquery选项卡想必大家并不陌生，本文为大家介绍个比较实用的jquery TAB选项卡，喜欢的朋友可以学习下2013-08-08
这篇文章主要介绍了JQuery中使用ajax传输超大数据的解决方法,也就是比较多的数据,超过max_upload_size等设置,本文方法在chrome浏览器下测试通过,需要的朋友可以参考下2014-07-07
这篇文章主要介绍了JQuery表单验证插件EasyValidator用法,以实例形式系统分析了EasyValidator的功能特性及具体用法,是非常实用的jQuery插件,需要的朋友可以参考下2014-11-11
jQuery 3.0 的 setter和getter 模式详解
这篇文章主要介绍了jQuery 3.0 的 setter和getter 模式详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
本文为大家详细介绍下父窗口中操作iframe、在子窗口中操作父窗口，获取iframe内的dom对象有两种方法，感兴趣的朋友可以了解下哈，希望对大家有所帮助2013-07-07
以前总是没搞明白是怎么回事，现在是迫不得已，就仔细看了看说明文档，终于测试成功了，记下2011-12-12
去年的时候刚接触Jquery，也就做界面特效用了下，对其很有兴趣，迫于现在项目中不怎么用，对其甚是想念呀，这不没抽点时间再来看看Juery中好玩的东西。2011-09-09
这篇文章主要为大家详细介绍了jquery仿京东商品浏览页面，鼠标放在图片上实现放大效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了jQuery 获取select选中值及清除选中状态的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-12-12
最新评论