jQuery实现表格冻结顶栏效果


Posted in jQuery onAugust 20, 2017

昨天晚上公司遇到个小需求,就是实现类似表格冻结顶栏的效果,具体描述就是下面动态图的效果

jQuery实现表格冻结顶栏效果

这样的效果不算是很难,但是实现起来确实挺麻烦的,这里的难点就不多说了,就是这个效果一下子弄到一点多,最后在我经常逛的一个网站里找到了答案。

原问题的地址:https://segmentfault.com/q/1010000000130774

这里介绍一下这个小插件的用法。首先先去著名'同性‘交往网站github里把代码下载下来。解压后是这样的:

jQuery实现表格冻结顶栏效果

主要用到是我红色框框里的,也可以看人家的源代码。这里只需要引用js就可以了,然后在table和thead这两个标签里加上图里的两个类:

然后就是加上这段js:

jQuery实现表格冻结顶栏效果

就是红色框框里的话。然后就可以出效果了。

但是,有的人可能没有出效果,不要慌,按下F12,看看错误信息,我的错误信息是有个.size没有定义这个方法,这时候把这段js给换一下就可以:

jQuery实现表格冻结顶栏效果

然后就可以实现效果啦!可能有人会觉得好烦啊,你这全是图片,我想直接复制没都没法复制,但是我觉得很多东西自己看一遍跟自己真正写出来是有差距的,希望大家能够去真正写一下,不过又想到昨晚我弄点一点的,眼都不想睁开了,哪有功夫再去写呀,所以我还是把我图片的东西给用打出来吧,好让大家能够复制:

table 里的类class="table-fixed-header"

thead 里的类class='header'

要加入的js:$('.table-fixed-header').fixedHeader();

总结

以上所述是小编给大家介绍的jQuery实现表格冻结顶栏效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 #jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 #jQuery
简单实现jQuery轮播效果
Aug 18 #jQuery
简单实现jQuery手风琴效果
Aug 18 #jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 #jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 #jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 #jQuery
You might like
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
php类自动加载器实现方法
2015/07/28 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
Prototype使用指南之array.js
2007/01/10 Javascript
JavaScript中“+=”的应用
2007/02/02 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
chosen实现省市区三级联动
2018/08/16 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
在Python中定义和使用抽象类的方法
2016/06/30 Python
python使用super()出现错误解决办法
2017/08/14 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
python中pika模块问题的深入探究
2018/10/13 Python
Pycharm安装python库的方法
2020/11/24 Python
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
北京SQL新华信咨询
2016/09/30 面试题
三爱活动实施方案
2014/03/19 职场文书
医院标语大全
2014/06/23 职场文书
施工单位安全责任书
2014/07/24 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
工作证明书
2015/06/15 职场文书