交替行背景 - 仅使用 css 隐藏/显示行时动态更新？

Question

我有一个表“.report”，它的行应该有交替的背景。 UI 允许用户动态隐藏和显示行，我希望行的背景始终保持该模式。我实现了解决方案，将“.hidden”类添加到隐藏行并将背景颜色属性设置为仅显示行，然后相应地将背景设置为“nth-of-type”。但这不起作用。可以看到第 n 个类型没有考虑“:not(.hidden)”规则。是否可以只用 CSS 来解决这个问题？我知道我可以用 JS 更改背景，但我宁愿避免它并仅在可能的情况下使用 css。

restoreRow: function(key) {
    let row = $("#" + key);
    row.show();
    row.removeClass("hidden");
},

removeRow: function(key) {
    let row = $("#" + key)
    row.hide();
    row.addClass("hidden");
},

.report tbody tr:not(.hidden):nth-of-type(even) {
    background-color: $white;
}

.report tbody tr:not(.hidden):nth-of-type(odd) {
    background-color: red;
}

Answer 1

我认为没有

only-css

解决方案可以做到这一点，您需要考虑

JS

refreshRowStyles

为所有没有

tr

类的

hidden

做样式。

function refreshRowStyles() {
    $('.report tbody tr').not('.hidden').each(function(index) {
        if (index % 2 === 0) {
            $(this).css('background-color', '$white');
        } else {
            $(this).css('background-color', 'red');
        }
    });
}

在 DOM 初始化时调用此方法。

$(document).ready(function() {
    refreshRowStyles();
});

此外，您需要使用

restoreRow

和

removeRow

方法调用它，以确保每次更改行的可见性时都会更新样式。

restoreRow: function(key) {
    let row = $("#" + key);
    row.show();
    row.removeClass("hidden");
    refreshRowStyles();
},

removeRow: function(key) {
    let row = $("#" + key);
    row.hide();
    row.addClass("hidden");
    refreshRowStyles();
},