斑马条带化使用CSS3隐藏行的表？斑马条带化使用CSS3隐藏行的表？(Zebra striping

2019-05-12 04:35发布

站内文章 / 后端开发

54 0

太酷不给撩

女 | 书童

私信

我有一个表

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

我试图设置表分拆使用第n个孩子选择，但似乎就是无法破解它。

 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将第子元素不管是什么，而不是孩子，一个给定的选择相匹配。如果你想要一些行失踪，不影响斑马条纹，你将不得不完全从表中删除，或者通过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只能坐第个孩子无论做什么，不是的一些属性日，我们将不得不放弃对CSS的这一部分。还有nth-of-type ，它选择的第个相同的元素类型的孩子，但是这是你能做的一切。

 #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:

当使用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的方式，你可以使用这个功能，会遍历在表中的行，检查该行并（重新）设置为可见奇数行类的visbility。

    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");

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:

您可以轻松地将假斑马条纹，如果你敷在父表垂直梯度重复，精确定位相匹配的行的高度（行会必须是透明的）。这样，该表将不会在乎什么隐藏的，它会重复不管。

文章来源: Zebra striping a table with hidden rows using CSS3?

标签： css css3 css-selectors

太酷不给撩

女 | 书童

私信

收藏的人(0)

Ta的文章更多文章

0条评论

还没有人评论过~