JS/jQuery Table固定ヘッダコード

1974 ワード

$(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 = $(`${clone}
`) 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() } }); })() })