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

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/