固定table

$.fn.fixTableHeader = function ()
            {
                if ($(this).length != 1) return;
            
                this.table = $(this);
            
                $(this).before('<div style="display: none; position:  absolute; top: 0; left: 0;transition: top 1s;" name="tableHeader"><table class="table table-condensed"><thead><tr style="</tr></thead></table></div>');
            
                var headCells = $(this.table).find("thead tr th,thead tr td");
            
                for (var i = 0; i < headCells.length; i++)
                {
                    var thWidth = $(headCells)[i].offsetWidth;
                    $(this.table).prev("div[name=tableHeader]").find("table thead tr").append($(headCells)[i].outerHTML);
                    $(this.table).prev("div[name=tableHeader]").find("table thead tr th:last-child").css("width", thWidth + "px");
                };
            
                this.scorll = function ()
                {
                    var tableTop = $(this.table)[0].offsetTop;
                    var scrollTop = (window.scrollY || window.pageYOffset);
            
            
                    if (scrollTop - tableTop >= 0)
                    {
                    $(this.table).prev("div[name=tableHeader]").css("top", scrollTop);
                        $(this.table).prev("div[name=tableHeader]").show();
                    }
                    else
                    {
                        $(this.table).prev("div[name=tableHeader]").hide();
                    }
                }
            
                $(window).scroll(this.scorll);            
            }

posted on 2016-03-02 16:43  wjw413c  阅读(138)  评论(0编辑  收藏  举报

导航