Zebra 使用 CSS3 对带有隐藏行的表进行条带化处理？答案

【问题标题】：Zebra striping a table with hidden rows using CSS3?Zebra 使用 CSS3 对带有隐藏行的表进行条带化处理？
【发布时间】：2011-04-15 23:47:27
【问题描述】：

我有一张桌子

<table id="mytable">
    <tr style="display: none;"><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr style="display: none;"><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
 </table>

我正在尝试将表格条带化设置为使用 nth-child 选择器，但似乎无法破解它。

 table #mytable tr[@display=block]:nth-child(odd) { 
      background-color:  #000;  
 }
 table #mytable tr[@display=block]:nth-child(odd) { 
      background-color:  #FFF;
 }

我很确定我已经接近了......似乎无法破解它。

有人提供线索吗？

【问题讨论】：

标签： css css-selectors

【解决方案1】：

这是您将要到达的最接近的地方。请注意，您不能使 nth-child 只计算显示的行； nth-child 无论如何都会采用第 n 个子元素，而不是与给定选择器匹配的第 n 个子元素。如果您希望丢失某些行而不影响斑马条纹，则必须通过 DOM 或服务器端将它们从表中完全删除。

<!DOCTYPE html>
<style>
#mytable tr:nth-child(odd) { 
      background-color:  #000;  
 }
#mytable tr:nth-child(even) { 
      background-color:  #FFF;
 }
</style>
<table id="mytable">
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
 </table>

以下是我所做的修复：

 table #mytable tr[@display=block]:nth-child(odd) { 
      background-color:  #000;  
 }

无需为基于id 的选择器指定祖先选择器；只有一个元素可以匹配#table，因此您只需通过添加table 来添加额外的代码。

 #mytable tr[@display=block]:nth-child(odd) { 
      background-color:  #000;  
 }

现在，[@display=block] 将匹配属性 display 设置为阻止的元素，例如 <tr display=block>。 Display 不是有效的 HTML 属性；你似乎想要做的是让选择器匹配元素的样式，但你不能在 CSS 中做到这一点，因为浏览器需要应用 CSS 中的样式才能弄清楚，这它在应用此选择器时正在执行中。因此，您将无法选择是否显示表格行。由于nth-child无论如何只能带第n个孩子，而不是带有某些属性的第n个孩子，我们将不得不放弃这部分CSS。还有nth-of-type，它选择相同元素类型的第n个子元素，但你能做的就是这些了。

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

你有它。

【讨论】：

谢谢。由于我使用原型循环遍历表中的所有行并根据其中一个单元格中的过滤条件隐藏/取消隐藏，是否可以将一个类添加到所有未隐藏的行以及 NTH - 基于该类的儿童或 NTH-OF-TYPE 条带化？ tr .visible_row:nth-child(odd) ?
甚至只是：.visible_row:nth-child(odd) { #000; }
@Alex :nth-child 计算父元素的所有个子元素，无论它是否匹配任何前面的选择器。请记住，将两个选择器放在一起并且中间没有空格意味着匹配任何匹配第一个并且匹配第二个的元素。因此，如果第二行不可见，.visible_row:nth-child(even) 将与第二行不匹配，即使第二行隐藏，您也会看到第一行和第三行的样式为奇数颜色。如果这是您想要的效果，它可以工作，但您可能希望斑马条纹仅适用于可见行，这是不可能的。
为了使斑马条纹仅适用于可见行，您需要实际从表中删除不可见的行。如果您使用 Prototype，您可能希望使用 Element.remove() 从表中完全删除元素，然后在需要时再次插入。

【解决方案2】：

如果您使用 JQuery 来更改行的可见性，您可以将以下函数应用于表以在适当的位置添加 .odd 类。每次可见的行不同时调用它。

        function updateStriping(jquerySelector){
            $(jquerySelector).each(function(index, row){
                $(row).removeClass('odd');
                if (index%2==1){ //odd row
                    $(row).addClass('odd');
                }
            });
        }

而对于 css 只需这样做

table#tableid tr.visible.odd{
    background-color: #EFF3FE;
}

【讨论】：

为什么是 tr.visible.odd 而不仅仅是 tr.odd ？
因为索引从0开始，要获取实际奇数行，需要将index%2==1改为index%2==0

【解决方案3】：

虽然 Zebra 无法使用 CSS3 对带有隐藏行的表格进行条带化，但您可以使用 JavaScript 做到这一点。方法如下：

    var table = document.getElementById("mytable");
    var k = 0;
    for (var j = 0, row; row = table.rows[j]; j++) {
        if (!(row.style.display === "none")) {
            if (k % 2) {
                row.style.backgroundColor = "rgba(242,252,244,0.4)";
            } else {
                row.style.backgroundColor = "rgba(0,0,0,0.0)";
            }
            k++;
        }
    }

【讨论】：

【解决方案4】：

对于 jquery 方式，您可以使用此函数迭代表中的行，检查行的可见性并（重新）设置可见奇数行的类。

    function updateStriping(jquerySelector) {
        var count = 0;
        $(jquerySelector).each(function (index, row) {
            $(row).removeClass('odd');
            if ($(row).is(":visible")) {
                if (count % 2 == 1) { //odd row
                    $(row).addClass('odd');
                }
                count++;
            }            
        });
    }

使用 css 为奇数行设置背景。

#mytable tr.odd { background: rgba(0,0,0,.1); }

然后您可以随时使用以下方法调用此斑马条纹：

updateStriping("#mytable tr");

【讨论】：

这对我有用，还有一个编辑。我需要专门清点我的应用程序以不同方式可见的内容。这对我有用：function updateStriping(jquerySelector){ var visibleItems = []; $(jquerySelector).each(function(){ if( $(this).is(":visible") ) { visibleItems.push(this); } }); $('.odd').removeClass('odd'); $(visibleItems).each(function(index, row){ if (index%2==1){ //odd row $(row).addClass('odd'); } else { // something } }); } 抱歉代码混乱。

【解决方案5】：

我想出了一种解决方案，但它依赖于表格只能有最大数量的隐藏行的事实，并且缺点是每个可能的隐藏行都需要 2 个额外的 CSS 规则。原理是，每隐藏一行之后，就将奇偶行的background-color左右切换。

这是一个简单的示例，其中只有 3 个隐藏行和最多 4 个隐藏行的必要 CSS。您已经可以看到 CSS 变得多么笨拙，但仍然有人可能会发现它有一些用处：

table{
  background:#fff;
  border:1px solid #000;
  border-spacing:1px;
  width:100%;
}
td{
  padding:20px;
}
tr:nth-child(odd)>td{
  background:#999;
}
tr:nth-child(even)>td{
  background:#000;
}
tr[data-hidden=true]{
  display:none;
}
tr[data-hidden=true]~tr:nth-child(odd)>td{
  background:#000;
}
tr[data-hidden=true]~tr:nth-child(even)>td{
  background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
  background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
  background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
  background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
  background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
  background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
  background:#000;
}

<table>
  <tbody>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr data-hidden="true"><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr data-hidden="true"><td></td><td></td></tr>
    <tr data-hidden="true"><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
  </tbody>
</table>

【讨论】：

【解决方案6】：

在 jquery 中..

var odd = true; 
$('table tr:visible').each(function() {   
  $(this).removeClass('odd even').addClass(odd?'odd':'even'); 
  odd=!odd 
});

【讨论】：

【解决方案7】：

如果您在父表上应用垂直重复的渐变，您可以轻松地伪造斑马条纹，并精确定位以匹配行的高度（行必须是透明的）。这样表格就不会在乎是否隐藏了任何东西，无论如何它都会重复。

【讨论】：

【解决方案8】：

我在css中添加：

tr[style="display: table-row;"]:nth-child(even) {
      background-color:  #f3f6fa;  
}

并在创建 tr 时添加标签

style="display: table-row;"

【讨论】：

【解决方案9】：

html表格中斑马颜色的jquery代码

$("#mytabletr:odd").addClass('oddRow');
$("#mytabletr:even").addClass('evenEven');

还有你可以做的CSS

.oddRow{background:#E3E5E6;color:black}
.evenRow{background:#FFFFFF;color:black}

【讨论】：