JS/jQuery Table固定表頭代碼

$(function() {
        (function() {
            var $height = $('[fixedHeaderTable]').attr('fixedHeaderTable')
            var fixedTableStle = {
                'maxHeight': $height,
                'overflow': 'auto',
                'position': 'relative',
            }
            $('[fixedHeaderTable]').css(fixedTableStle)
            var clone = $('[fixedHeaderTable]').find('thead').get(0).innerHTML
            var cloneTableClass = $('[fixedHeaderTable] > table').attr('class')
            var cloneTableId = $('[fixedHeaderTable] > table').attr('id')
            var cloneTable = $(`<table class="${cloneTableClass} coypedTable" id="${cloneTableId}"><thead>${clone}</thead></table>`)
            var isScroll = function() {
                if ($('[fixedHeaderTable]').find('.coypedTable').length === 0) {
                    isScroll = function() {
                        $('[fixedHeaderTable]').append(cloneTable)
                    }
                }
                isScroll()
            }
            $('[fixedHeaderTable]').scroll(function() {
                var scrollTop = $(this).scrollTop(),
                    cloneTableStyle = {
                        'position': 'absolute',
                        'left': '0',
                        'right': '0',
                        'top': scrollTop + 'px'
                    };
                if ($(this).scrollTop() === 0) {
                    cloneTable.addClass('hide')
                    $('.coypedTable').remove()
                } else {
                    cloneTable.removeClass('hide');
                    cloneTable.css(cloneTableStyle);
                    isScroll()
                }
            });
        })()
    })
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容