Question

如果不显示某些表行，如何为每个第二个表行添加背景颜色？

在我的HTML中是一个包含一些表行的简单表。就像那样：

<label for="cb">hide blue</label>
<input id="cb" type="checkbox" onchange="hideBlue(this.checked)" />

<table>
    <tr data-cat="red">
        <td>red car</td>
    </tr>
    <tr data-cat="blue">
        <td>blue jacket</td>
    </tr>
    <tr data-cat="red">
        <td>red bull</td>
    </tr>
    <tr data-cat="red">
        <td>red pen</td>
    </tr>
</table>

正如您所看到的，还有一个可以切换“blue”类别行的复选框。我的CSS看起来像这样：

tr:nth-child(odd) {
    background-color:#aaa;
}

但是现在如果有人隐藏“蓝色”类别（通过添加display:none - 类），背景颜色将不再正确。我该如何防止这种失败？

我已经尝试将:not(.displaynone)添加到css规则中，但这不起作用。

这是jsFiddle

Answer 1

有一种方法可以仅使用CSS选择器来更新交替的行颜色。

tr:nth-child(odd) {
    background-color:#aaa;
}

tr.displaynone ~ tr {
    background-color: transparent;
}

tr.displaynone ~ tr:nth-child(even) {
    background-color:#aaa;
}

这样做是在displaynone行background-color到transparent之后设置所有兄弟姐妹，然后在background-color之后设置偶数行} #aaa。

这适用于您的示例小提琴（forked here），但如果您必须一次隐藏多个元素，它将无效。（example，注释掉标记的行并单击行）。

如果您需要一次隐藏多个行，此解决方案将无法为您工作，并且每当您隐藏/显示行时，您都必须使用javascript来计算行颜色。

Answer 2

您还没有标记jQuery，但我仍然会将其作为替代方案（也适用于可能会遇到同样问题的其他用户）。

function loopTable() {
    var x=0;
    $("table>tbody>tr").each(function() {
        if( $(this).is(":visible")  ) {
            if( x%2==0 )
                $(this).addClass('red');
            else
                $(this).removeClass('red');
            x++;     
        }
    });
}

应该在正文加载时调用此函数，并且每次更改表时都应该调用此函数。间隔或。

DEMO

Answer 3

根据您的要求，只有jquery可以解决您的问题。即使隐藏了一个<tr>，背景颜色也会按顺序排列。检查DEMO。

这是jQuery代码。

$(document).ready(function(){

$("tr[data-cat='red']:even").css({'background':'red'});
$("tr[data-cat='red']:odd").css({'background':'orange'});
$("tr:not([data-cat='red'])").css({'background':'blue'});
});

即使未显示a，也会交替显示背景颜色

3 个答案: