如何将一个thead元素的位置设置为另一个元素

时间:2017-12-05 11:20:01

标签: javascript jquery html css

大家好我正在尝试将第一个表的位置设置为第二个表中的位置。 滚动前第一个表是可见的,滚动后第二个表从不可见变为可见,但元素的位置不同。

Jquery:函数run('.\MfileName.m') 当页面加载时,我得到第一个表并获取所有位置的数组并克隆到另一个表并删除克隆表的tbody。

init()

真正的问题是当我在该位置设置左侧时。例如:

    $.fn.fixMe = function () {
        var posiciones = [];
        return this.each(function () {
            var $this = $(this),
                    $t_fixed;
            function init() {
                
                posiciones[0] = $(".blue thead tr :nth-child(1)").position();
                posiciones[1] = $(".blue thead tr :nth-child(2)").position();
                posiciones[2] = $(".blue thead tr :nth-child(3)").position();
                posiciones[3] = $(".blue thead tr :nth-child(4)").position();
                posiciones[4] = $(".blue thead tr :nth-child(5)").position();
                posiciones[5] = $(".blue thead tr :nth-child(6)").position();
                posiciones[6] = $(".blue thead tr :nth-child(7)").position();
                posiciones[7] = $(".blue thead tr :nth-child(8)").position();
                posiciones[8] = $(".blue thead tr :nth-child(9)").position();
                posiciones[9] = $(".blue thead tr :nth-child(10)").position();
                posiciones[10] = $(".blue thead tr :nth-child(11)").position();
                posiciones[11] = $(".blue thead tr :nth-child(12)").position();
                posiciones[12] = $(".blue thead tr :nth-child(13)").position();
                
                
                $this.wrap('<div class="container2" class="table table-hover"/>');
                $t_fixed = $this.clone();
                $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
               
                resizeFixed();
                console.log(posiciones);
            }
            function resizeFixed() {
                $t_fixed.find("th").each(function (index) {
                    $(this).css("width", $this.find("th").eq(index).outerWidth() + "px");
                });
            }
            function scrollFixed() {
                
                var offset = $(this).scrollTop(),
                        tableOffsetTop = $this.offset().top,
                        tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
                if (offset < tableOffsetTop || offset > tableOffsetBottom) {
                    $t_fixed.hide();
                    
                    console.log("no anclado");
                    console.log($("thead tr :nth-child(1)").position());
                    
                    
                } else if (offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden")) {
    
                    $t_fixed.show();
                    $("thead tr :nth-child(1)").css({'left':posiciones[0].left});
                    $("thead tr :nth-child(2)").css({'left':posiciones[1].left});
                    $("thead tr :nth-child(3)").css({'left':posiciones[2].left});
                    $("thead tr :nth-child(4)").css({'left':posiciones[3].left});
                    $("thead tr :nth-child(5)").css({'left':posiciones[4].left});
                    $("thead tr :nth-child(6)").css({'left':posiciones[5].left});
                    $("thead tr :nth-child(7)").css({'left':posiciones[6].left});
                    $("thead tr :nth-child(8)").css({'left':posiciones[7].left});
                    $("thead tr :nth-child(9)").css({'left':posiciones[8].left});
                    $("thead tr :nth-child(10)").css({'left':posiciones[9].left});
                    $("thead tr :nth-child(11)").css({'left':posiciones[10].left});
                    $("thead tr :nth-child(12)").css({'left':posiciones[11].left});
                    $("thead tr :nth-child(13)").css({'left':posiciones[12].left});
                    
                    console.log("anclado");
                    console.log(posiciones);
                    console.log($("thead tr :nth-child(1)").position());
                    
                }
                 
                console.log('tbody tr');
            }
            $(window).resize(resizeFixed);
            $(window).scroll(scrollFixed);
            init();
        });
    };
    
    
    $(document).ready(function () {
        $("table").fixMe();
    });

$("thead tr :nth-child(1)").css({'left':posiciones[0].left}); 的结果为11,但未在posiciones[0].left

中设置

0 个答案:

没有答案