javascript - 优化功能，固定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 表达式:

<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'});
                    }
                }
            }

然后只需将类“fixed-header”添加到您的表中:

如果您使用的是响应式表格 (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
});

尽情享受吧!