1. 首页
  2. 问答
  3. 斑马使用CSS3对隐藏行进行条带分割？

斑马使用CSS3对隐藏行进行条带分割？

2010-09-22 75 views
30

我有一个表斑马使用CSS3对隐藏行进行条带分割？

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

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

有人通过线索？

来源

2010-09-22 Alex C

回答

19

下面就是你将要得到的。请注意，您不能使nth-child只显示行数; nth-child将采取 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> 。显示不是有效的HTML属性;你似乎试图做的是让选择器与元素的样式匹配，但是你不能在CSS中这样做，因为浏览器需要在CSS中应用样式，然后才能找出它，它正在应用这个选择器时正在进行中。因此，您将无法选择是否显示表格行。由于nth-child只能采取 n这个孩子不管是什么，而不是 n有一些属性，我们将不得不放弃在这部分的CSS。还有nth-of-type，它选择相同元素类型的第012个孩子，但这就是你所能做的。

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

而且你有它。

来源

2010-09-22 22:20:37

+0

感谢。由于我通过表中的所有行使用的原型和隐藏/取消隐藏基于细胞的一个筛选条件循环，才有可能给类添加到没有隐藏的所有行，以及第N基于该类的-CHILD或NTH-OF-TYPE条带？ tr .visible_row：nth-​​child（奇怪）？ – 2010-09-23 03:15:34

+0

甚至只是： .visible_row：第n个孩子（奇）{＃000; } – 2010-09-23 03:17:23

+4

@Alex'：nth-​​child'统计父元素的所有子元素，而不管它是否与任何前面的选择器匹配。请记住，将两个选择器放在一起并且没有空格意味着匹配匹配第一个*和*匹配第二个的任何元素。因此，如果第二行不可见，则“.visible_row：nth-​​child（even）”将不会与第二行匹配，并且您会看到第一行和第三行以奇数颜色显示样式，即使第二行是隐藏的。如果这就是你要做的效果，它会起作用，但你可能希望斑马条纹只适用于可见行，这是不可能的。 – 2010-09-23 04:49:46

3

如果您使用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; 
}

来源

2011-12-20 02:20:37

+0

为什么tr.visible.odd而不只是tr.odd？ – kdubs 2012-12-13 04:35:12

+0

由于索引从0开始，为了得到实际的奇数行，应该将索引％2 == 1更改为索引％2 == 0 – mhost 2016-09-27 21:02:21

-1

我加入CSS：

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

和创建TR在标签

style="display: table-row;"

来源

2013-03-19 08:26:09 Anton

+0

这是行不通的。 – inafalcao 2017-08-25 20:21:04

2

虽然可以”添加t斑马使用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++; 
     } 
    }

来源

2014-01-02 23:29:24 JSWilson

-1

jQuery的HTML表格

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

和CSS斑马颜色代码，你可以做

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

来源

2014-01-08 14:10:49

-1

你可以很容易伪造的斑马条纹，如果你申请一个垂直在父表上重复渐变，定位完全匹配行的高度（行必须是透明的）。这样桌子不会在乎是否隐藏了任何东西，无论如何它都会重复。

来源

2015-01-11 18:29:52 rale09

1

对于一个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");

来源

2015-06-06 21:10:34 Stalzer

+0

这对我有用，还有一个编辑。我需要专门清点以我的应用程序的不同方式显示的内容。以下是我的工作：'''function updateStriping（jquerySelector）{ \t \t var visibleItems = []; \t \t $（jquerySelector）。每个（函数（）{ \t \t \t如果（$（本）。是（ “：可见”））{ \t \t \t \t visibleItems.push（本）; \t \t \t} \t \t}）; 012（'。odd'）。removeClass（'odd'）; \t \t $（visibleItems）。每个（函数（指数，行）{ \t \t \t如果（指数％2 == 1）{//奇数行 \t \t \t \t $（行）.addClass（ '奇' ）; \t \t \t} \t \t \t其他{ \t \t \t \t //东西 \t \t \t} \t \t}）; }''' 对不起，混乱的代码。 – 2016-12-13 14:59:45

1

我想出了一个排序的解决方案，但它是依赖于一个事实，即表永远只能有一个最大数量隐藏的行，并为每个可能的隐藏行需要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>

来源

2016-04-27 14:24:36 Shaggy

0

jQuery的..

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

来源

2017-01-25 23:26:01 commonpike

相关问题

 相关问题