Question

我有许多使用Angular创建的复选框。每个复选框控制表格上列的外观。因此，如果我单击复选框3，则表格的第3列将不再可见。

我只需做

即可实现这一目标

$('#dynamic tr > *:nth-child('+idx+')').toggle();

我偶然发现了这个article，我想在我的桌子上使用它。

问题是从javascript文件创建的粘性标头不会跟随我的实际表。因此，当它应该被删除时，它将坚持显示第2列。

我认为如果每次隐藏或显示列时都会运行它，那么它会正确更新，但是如果你这样做，即使标题确实更新了，出于某种原因，每次都会出现很多空白空间单击。通过点击几次，页面就会变慢。

由于粘贴标题的代码是从javascript代码中动态生成的，我试图隐藏并以与我实际表格相同的方式显示相应的项目。

$('.sticky-thead th > *:nth-child('+idx+')').toggle();

但这没有任何影响。有人可以想出一个更好的方法来使粘性标题动态化，所以它只显示我的表格中可见的那些项目吗？

修改

我提到的javascript文件包含以下代码，用于生成一种粘性标头。

$(function(){
    $('table').each(function() {
        if($(this).find('thead').length > 0 && $(this).find('th').length > 0) {
            var $w     = $(window),
                $t     = $(this),
                $thead = $t.find('thead').clone(),
                $col   = $t.find('thead, tbody').clone();

            $t
            .addClass('sticky-enabled')
            .css({
                margin: 0,
                width: '100%'
            }).wrap('<div class="sticky-wrap" />');

            if($t.hasClass('overflow-y')) $t.removeClass('overflow-y').parent().addClass('overflow-y');

            $t.after('<table class="sticky-thead" />');

            if($t.find('tbody th').length > 0) {
                $t.after('<table class="sticky-col" /><table class="sticky-intersect" />');
            }

            var $stickyHead  = $(this).siblings('.sticky-thead'),
                $stickyCol   = $(this).siblings('.sticky-col'),
                $stickyInsct = $(this).siblings('.sticky-intersect'),
                $stickyWrap  = $(this).parent('.sticky-wrap');

            $stickyHead.append($thead);

            $stickyCol
            .append($col)
                .find('thead th:gt(0)').remove()
                .end()
                .find('tbody td').remove();

            $stickyInsct.html('<thead><tr><th>'+$t.find('thead th:first-child').html()+'</th></tr></thead>');

            var setWidths = function () {
                    $t
                    .find('thead th').each(function (i) {
                        $stickyHead.find('th').eq(i).width($(this).width());
                    })
                    .end()
                    .find('tr').each(function (i) {
                        $stickyCol.find('tr').eq(i).height($(this).height());
                    });

                    $stickyHead.width($t.width());

                    $stickyCol.find('th').add($stickyInsct.find('th')).width($t.find('thead th').width())
                },
                repositionStickyHead = function () {
                    var allowance = calcAllowance();

                    if($t.height() > $stickyWrap.height()) {
                        if($stickyWrap.scrollTop() > 0) {
                            $stickyHead.add($stickyInsct).css({
                                opacity: 1,
                                top: $stickyWrap.scrollTop()
                            });
                        } else {
                            $stickyHead.add($stickyInsct).css({
                                opacity: 0,
                                top: 0
                            });
                        }
                    } else {
                        if($w.scrollTop() > $t.offset().top && $w.scrollTop() < $t.offset().top + $t.outerHeight() - allowance) {
                            $stickyHead.add($stickyInsct).css({
                                opacity: 1,
                                top: $w.scrollTop() - $t.offset().top
                            });
                        } else {
                            $stickyHead.add($stickyInsct).css({
                                opacity: 0,
                                top: 0
                            });
                        }
                    }
                },
                repositionStickyCol = function () {
                    if($stickyWrap.scrollLeft() > 0) {
                        $stickyCol.add($stickyInsct).css({
                            opacity: 1,
                            left: $stickyWrap.scrollLeft()
                        });
                    } else {
                        $stickyCol
                        .css({ opacity: 0 })
                        .add($stickyInsct).css({ left: 0 });
                    }
                },
                calcAllowance = function () {
                    var a = 0;
                    $t.find('tbody tr:lt(3)').each(function () {
                        a += $(this).height();
                    });

                    if(a > $w.height()*0.25) {
                        a = $w.height()*0.25;
                    }

                    // Add the height of sticky header
                    a += $stickyHead.height();
                    return a;
                };

            setWidths();

            $t.parent('.sticky-wrap').scroll($.throttle(250, function() {
                repositionStickyHead();
                repositionStickyCol();
            }));

            $w
            .load(setWidths)
            .resize($.debounce(250, function () {
                setWidths();
                repositionStickyHead();
                repositionStickyCol();
            }))
            .scroll($.throttle(250, repositionStickyHead));
        }
    });
});

Answer 1

您通过ID（#）选择了表格。每个id对于页面上的每个元素都应该是唯一的。如果脚本克隆表，它将无法工作。请尝试使用类属性。

Sticky header不会根据我的更改进行更新

1 个答案: