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()
                }
            });
        })()
    })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容