優化html表格標題固定功能，根據屏幕大小和內容實時調整不同寬度

Question

我開發了一個函數來修復 html 表的標題，帶有 bootstrap 4 的響應表，根據屏幕的大小和“td”中的實時內容具有不同的寬度。

首先我調用響應表上的函數

$('.table-responsive:has("table.fixed-header")').on('scroll', function () {
        fixeTableHeader(parseInt($(this).offset().top));
    });

然后函數啟動腳本

function fixeTableHeader(top) {

        var thSize = [];
        var tdSize = [];
        var tablePosition = parseInt($('.fixed-header').offset().top);


        $('.fixed-header tbody tr:has(td) > *').each(function (index, val) {
            tdSize[index] = $(this).width();
        });

        $('.fixed-header thead th').each(function (index, val) {
            thSize[index] = $(this).width();
        });

        if (top > tablePosition) {
            $('.fixed-header thead').stop().css({
                top: (top - tablePosition),
                left: 0,
                position: 'absolute'
            });
            $('.fixed-header thead th').each(function (index, val) {
                $(this).width(thSize[index]);
            });

            var tdLength = $('.fixed-header tbody tr:has(td):eq(0) > *').length;
            if (tdLength > Object.keys(thSize).length) {
                $('.fixed-header tbody tr:has(td):eq(0) > *').each(function (index, val) {
                    if ($(this).width() == tdSize[index]) {
                        return false;
                    } else {
                        $('.fixed-header tbody tr:has(td) > *').each(function (index, val) {
                            $(this).width(tdSize[index]);
                        });
                        return false;
                    }

                });
            }

        } else {
            $('.fixed-header thead').css({top: 0, left: 0, position: 'static'});
        }
}

HTML EX：

<div class="table-responsive border border-top-0">
  <table class="table table-striped mb-0 fixed-header">
    <thead>
        <tr>
           <th></th>
           <th></th>
           <th></th>
           <th></th>
        </tr>
    </thead>
  <tbody>
   <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   ...
  </tbody>
 </table>
</div>

一切正常，除了如果同一頁面上有多個 html 表，瀏覽器會非常慢！

你能幫我優化我的功能，讓它在所有情況下都能正常工作嗎？

Answer 1

這里有三個函數可以在任何情況下修復 html 表頭！

       function setCookie(name, value, days) {
            var expires = "";
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = "; expires=" + date.toUTCString();
            }
            document.cookie = name + "=" + (value || "") + expires + "; path=/";
        }

        function getCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }   

        function fixeTableHeader(topAdd = 0, otherTop = 0) {

                var $fixedHeader = $('.fixed-header');
                if ($fixedHeader.length) {

                    var $thead;
                    var changeSize = false;
                    var thSize = [];
                    var top = otherTop === 0 ? $(window).scrollTop() + topAdd : otherTop;
                    var tablePosition = parseInt($fixedHeader.offset().top);
                    var tableHeight = parseInt($fixedHeader.height());

                    //Check table's header cloned
                    if (!$fixedHeader.hasClass('cloned')) {
                        $fixedHeader.addClass('cloned');
                        $thead = $('.fixed-header thead').clone().insertAfter('.fixed-header thead').addClass('clonedHead').hide();
                    } else {
                        $thead = $('.fixed-header.cloned thead.clonedHead');
                    }

                    //Responsive : recalculate the width
                    if (!getCookie('screenDim') || getCookie('screenDim') !== $fixedHeader.width()) {
                        setCookie('screenDim', $('.fixed-header').width());

                        changeSize = true;

                        $('.fixed-header thead th').each(function (index, val) {
                            thSize[index] = $(this).width();
                        });

                        $('th', $thead).each(function (index, val) {
                            $(this).width(thSize[index]);
                        });
                    }

                    //Check if cloned header is needed
                    if (tableHeight && top > tablePosition && (top - tablePosition < tableHeight)) {

                        if (changeSize) {
                            $('th', $thead).each(function (index, val) {
                                $(this).width(thSize[index]);
                            });
                        }

                        $thead.stop().css({
                            top: (top - tablePosition),
                            left: 0,
                            position: 'absolute'
                        });

                        if ($thead.is(":hidden")) {
                            $thead.show();
                        }

                    } else {
                        $thead.hide().css({top: 0, left: 0, position: 'static'});
                    }
                }
            }

只需將“固定標題”類添加到您的表中，然后：

如果您使用響應式表（Bootstrap 4），請使用：

$('.table-responsive').scroll(function () {
    fixeTableHeader(0, $(this).offset().top);
});

否則就足夠了

$(window).scroll(function () {
    fixeTableHeader(); // if you have a fixed nav on document : add $('#navbar').outerHeight() as parameter
});

享受 ！