表格左右滚动 部分固定

$.fn.magicTab = function(){
    this.each(function(){
        var $t = $(this);
        $t.find('th').each(function(){
            $(this).css({
                'width':$(this).css('width')
            });
        })
        var thtm = $t.prop('outerHTML');
        var $box = $t.parent();
        var $topTab;
        var $leftTab;
        var temp;
        $box.html( '<div class="scrllBox">' +  thtm + '<div class="fixed">' + thtm + '</div>' + '<div class="leftTab">' + thtm + '</div><div class="topTab">' + thtm + '</div>' + '</div>' );
        $oriTab = $('.scrllBox>table:first');
        $topTab = $box.find('.topTab');
        $leftTab = $box.find('.leftTab').css('height',$oriTab.height());
        $fixed = $box.find('.fixed');
        $topTab.children().add($leftTab.children()).add($fixed.children()).css({
            width : $oriTab.width()
        })
        temp = 0;
        $oriTab.find('th:lt(5)').each(function(){
            temp += $(this).outerWidth();
        })
        $leftTab.add($fixed).css({width:temp})
        $topTab.add($fixed).css({
            height:$leftTab.find('th').outerHeight()
        })
        $box.children().on('scroll',function(){
            var $t = $(this);
            var top = $t.scrollTop();
            var left = $t.scrollLeft();
            var $topTab = $('.topTab');
            if ( top > 0 ){
                $leftTab.css({
                    marginTop:'-'+top+'px',
                    height:this.clientHeight+top + 'px'
                });
            } else if ( !top ){
                $leftTab.css({
                    marginTop : 0,
                    height:this.clientHeight
                });
            }
            if ( left > 0 ){
                $topTab.css({
                    marginLeft:'-'+left+'px',
                    width:this.clientWidth+left + 'px'
                });
            } else if ( !left ){
                $topTab.css({
                    marginLeft : 0,
                    width:this.clientWidth
                })
            }
        })
    })
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值