Question

我有一张桌子

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

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

有人传递线索吗？

Answer 1

这就像你要得到的那样近。请注意，您不能使nth-child计数仅显示行; nth-child将采用 n 个子元素，无论是什么，而不是匹配给定选择器的 nth 子元素。如果你想要丢失一些行而不影响zebra-striping，你必须通过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>。显示不是有效的HTML属性;你似乎要做的是让选择器匹配元素的样式，但是你不能在CSS中做到这一点，因为浏览器需要先应用CSS中的样式才能弄清楚，它正在应用这个选择器的过程中。因此，您将无法选择是否显示表行。由于nth-child无论如何只能带着 n 的孩子，而不是 n 具有某些属性，我们将不得不放弃这一部分的CSS。还有nth-of-type，它选择相同元素类型的 n 孩子，但这就是你所能做的。

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

你有它。

Answer 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;
}

Answer 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++;
        }
    }

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

然后你可以使用：

来调用这个zebra-striper

updateStriping("#mytable tr");

Answer 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>

Answer 6

在jquery ..

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

Answer 7

我添加了css：

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

并在创建tr上添加标签

style="display: table-row;"

Answer 8

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

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

你可以做的CSS

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

Answer 9

如果在父表上应用垂直重复的渐变，您可以很容易地伪造斑马条纹，其位置完全匹配行＆＃39;高度（行必须是透明的）。这样，如果有什么东西隐藏起来，桌子就不会在意，无论如何都会重复。

Zebra使用CSS3对隐藏行进行条带化处理？

9 个答案: