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 相关文章推荐
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jquery实现轮播图特效
Apr 12 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
pywinauto自动化操作记事本
2019/08/26 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
python可以用哪些数据库
2020/06/22 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
迟到检讨书400字
2014/01/13 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js