jQuery粘性表插件表格头部固定在顶部-插件特效-ICode联盟

粘性的表是一个简单的jQuery插件使表头粘上滚动,你永远不会松散表标题。(function($){ $.fn.stickytable = function(options){ var settings = $.extend({},$.fn.stickytable.defaults, options); return this.each(function(index){ var table = $(this); var fixedheader = $('

'); var tableOffset = table.offset().top; var tableleft = table.offset().left; var tablewidth = table.width(); var tableheight = table.height(); if($('thead',table).length < 1) { if($('th',table).length > 0){ $('th',table).eq(0).parent().wrap(''); $('.theader',table).prependTo(table); } else $('tr',table).eq(0).wrap(''); } var $header = $("thead", table).clone(); var newTable = $('

'); $header.appendTo(newTable); newTable.css('margin','0'); fixedheader.css({ 'position':'fixed', 'top':'0px', 'display':'none', 'left':tableleft+'px', 'width':tablewidth+2+'px', 'z-index': '103' }); var $fixedHeader = fixedheader.append(newTable); table.find('th').each(function(index, valuee){ //console.log($(this).width()+'px'); $header.find('th').eq(index).css('width',$(this).width()+'px'); }); $(window).on("scroll", function() { var offset = $(this).scrollTop(); tableOffset = table.offset().top; tablewidth = table.width(); tableheight = table.height(); if (offset >= tableOffset && $fixedHeader.is(":hidden") && offset < tableOffset+tableheight) { fixedheader.appendTo('body'); $fixedHeader.fadeIn(100); table.addClass('stuck'); } else if (offset < tableOffset || offset > tableOffset+tableheight-30) { $fixedHeader.fadeOut(150); table.removeClass('stuck'); } }); }); } $.fn.stickytable.defaults = { }})(jQuery);$(document).ready(function(){ $('.stickytable').stickytable();});

jQuery粘性表插件表格头部固定在顶部

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

未经允许不得转载： ICode联盟 » 插件特效 » jQuery粘性表插件表格头部固定在顶部

猜你喜欢更多»

项目推荐更多»

[开源]基于 Vue、Datav、Echart 框架的数据大屏项目，可自由替换 (1)

[开源]一套企业级微服务框架、微服务能力开放平台，功能强大 (0)

[开源]免费开源的流程设计器，开箱即用，助力流程开发使用更简单 (0)

[开源]MIT开源协议，前后端分离、美观大方后台通配权限管理系统 (1)

[开源]一款终端仿真软件，支持多种后端协议，无依赖跨平台使用 (0)