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实现表格冻结顶栏效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

您可能感兴趣的文章:

相关文章

  • JQuery.closest(),parent(),parents()寻找父结点

    JQuery.closest(),parent(),parents()寻找父结点

    在50个必备的实用jQuery代码段看到关于closest()方法的介绍,考虑到开发过程中经常有找爹的需求,以前用的都是parent()/parents()方法(还经常找不到!),所以就此研究对比一下!
    2012-02-02
  • js页面滚动时层智能浮动定位实现(jQuery/MooTools)

    js页面滚动时层智能浮动定位实现(jQuery/MooTools)

    关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果
    2011-08-08
  • jQuery控制元素显示与隐藏的三种方式对比

    jQuery控制元素显示与隐藏的三种方式对比

    使用jquery控制div的显示与隐藏,一句话就能搞定,下面这篇文章主要给大家介绍了关于jQuery控制元素显示与隐藏的三种方式对比,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • 自动适应iframe右边的高度

    自动适应iframe右边的高度

    在开发项目过程中,用iframe嵌套,会发现一个问题,用iframe嵌套的html结构右边不会自动适应高度。如何解决这一问题呢,下面就跟小编一起来看下吧
    2016-12-12
  • jquery实现简单的自动播放幻灯片效果

    jquery实现简单的自动播放幻灯片效果

    这篇文章主要介绍了jquery实现简单的自动播放幻灯片效果,较为详细的介绍了html页面布局、css样式设置及jQuery控制自动播放幻灯的相关技巧,需要的朋友可以参考下
    2015-06-06
  • jquery.mobile 共同布局遇到的问题小结

    jquery.mobile 共同布局遇到的问题小结

    这篇文章主要介绍了jquery.mobile 共同布局遇到的问题小结,需要的朋友可以参考下
    2015-02-02
  • jQuery 对象中的类数组操作

    jQuery 对象中的类数组操作

    我们都知道jQUery对象中有一个类数组的元素包装集,该集合类似js中的数组一样拥有length属性,因此我们称此为类数组,下面我们就来总结下这个jQuery对象中的类数组时如何进行操作的
    2009-04-04
  • 那些年,我还在学习jquery 学习笔记

    那些年,我还在学习jquery 学习笔记

    那些年学习了一些基本的web开发知识,其中已经有javascript语言了,为什么还要学习Jquery啊
    2012-03-03
  • jQuery手动点击实现图片轮播特效

    jQuery手动点击实现图片轮播特效

    这篇文章主要为大家详细介绍了jQuery手动点击实现图片轮播特效,手动点击数字卡片实现图片轮播,对图片轮播感兴趣的小伙伴们可以参考一下
    2015-12-12
  • jQuery创建折叠式菜单

    jQuery创建折叠式菜单

    这篇文章主要为大家详细介绍了jQuery创建折叠式菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06

最新评论