jquery - 你怎么能做替代行颜色，但只在可见行上？

Question

我有以下代码来执行替代行颜色，效果很好：

$("table.altRow tr:odd").css("background-color", "#DEDFDE");
$("table.altRow tr:even").css("background-color", "#EEECEE");

但是我在某些情况下隐藏了一些行，所以我想看看是否有任何方法可以做替代行颜色，但只适用于可见行？

Answer 1

/**
 *  Iterate each visible row, if :odd or :even, apply 
 *  the relevant background colour depending on a flag.
**/
var evenOdd = 0;
$("table.altRow tr:visible").each(function() {  
    $(this).css("background-color", ( evenOdd ? "#DEDFDE" : "#EEECEE" ));
    evenOdd = !evenOdd;
});

演示：http: //jsfiddle.net/uMP5x/7/

正如Andreas所提到的，您可以使用 jQuery 的.each()第一个参数来利用模数，从而消除我最初对布尔值的需求。

/**
 *  Iterate each visible row, if :odd or :even, apply 
 *  the relevant background colour depending if it's a 0 or 1
 *  after a simple MOD division.
**/
$("table.altRow tr:visible").each(function( index ) {  
    $(this).css("background-color", ( index % 2 ? "#DEDFDE" : "#EEECEE" ));
});

演示：http: //jsfiddle.net/uMP5x/8/

Answer 2

我在stackoverflow上搜索了一个答案，但我没有得到任何答案。最后我的经理帮我解决了这个问题。<tr>因此，对于要设置样式的任何行（元素），请ui:field在 ui.xml 活页夹文件中创建一个条目。

<tr ui:field="stylingRow">

然后在相应的 Java 类中使用 @UiField 注释来获取该特定行的 DOM 元素。

@UiField TableRowElement stylingRow;

然后你可以用它做任何事情......添加样式等......

stylingRow.getStyle().setBackgroundColor("black");

中有很多方法可用TableRowElement，因此，如果只有几行被隐藏或其他什么，并且您需要所有可见行的斑马样式..您可以使用上述语句手动更改隐藏行的样式。

Answer 3

CSS3 为您提供了巧妙的方法：

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

这将仅在可见行上设置颜色。