javascript - 将背景应用到动态生成的表中的第一行和每第三行

Question

我有一个表格，其中的行是动态生成的。我隐藏了第二行，以便用户可以扩展该行(如果他或她选择这样做)。我需要为每一行和第三行设置交替背景，第二行将采用前一行的背景色。这里有一张图片可以帮助解释:

我目前使用的CSS是这样的:(由@rusmus提供)

.tbody tr:nth-child(4n), tbody tr:nth-child(4n- 1){
      background-color: #FF0000;
}

这是他的工作示例的链接:http://jsfiddle.net/Lutkz/1/

但出于某种原因，它并没有像 jsfiddle 那样将颜色应用于受影响的对象

旁注:整个表在 foreach() 中，它将数据库中的每一行显示到表中。

表格代码:

    <div class="table-wrapper" id="monthly-payers">
  <table border="0" cellpadding="0" cellspacing="0" class="portfolio table table-striped-improved">
    <thead>
      <tr>
        <th class="persist essential security">Security</th>
        <th class="persist essential">Symbol</th>
        <th class="optional">Number<br>of Shares</th>
        <th class="optional">Cost<br>Basis</th>
        <th>Current<br>Price</th>
        <th>Stock<br />Return %</th>
        <th>Buy<br>Under</th>
        <th>Dividend<br>Yield</th>
        <th>Ex-Dividend<br>Date</th>
        <th class="persist">Payout<br>Date</th>
        <th>Cumulative<br>Dividend</th>
      </tr>
    </thead>
    <tbody>
<?php if( isset($open_trades['monthly-payers']) && !empty($open_trades['monthly-payers']) ){ ?>
<?php foreach( $open_trades['monthly-payers'] as $trade ){ 
      $numShares = empty($trade['num_shares'])? 1 : intval($trade['num_shares']);

?>
      <tr>
        <td><?php echo $trade['security']; ?></td>
        <td><?php echo $trade['symbol']; ?></td>
        <td><?php echo !empty($trade['num_shares']) ? $trade['num_shares'] : '&ndash;'; ?></td>
        <td><?php echo is_numeric($trade['entry_price']) ? '$' . sprintf("%.02f", $trade['entry_price']) : '&ndash;'; ?></td>
        <td><?php echo is_numeric($trade['current_price']) ? '$' . sprintf("%.02f", $trade['current_price']) : '&ndash;'; ?></td>
        <td><?php echo (is_numeric($trade['current_price']) && is_numeric($trade['entry_price'])) ? sprintf("%.02f", ($trade['current_price'] - $trade['entry_price']) / $trade['entry_price'] * 100)."%" : ''; ?></td>
        <td><?php echo is_numeric($trade['buy_under']) ? '$' . sprintf("%.02f", $trade['buy_under']) : '&ndash;'; ?></td>
        <td><?php echo is_numeric($trade['dividend_yield']) ? sprintf("%.02f", $trade['dividend_yield']) . '%' : '&ndash;'; ?></td>
        <td><?php echo date('m/d/y', $trade['ex_dividend_date']); ?><?php echo !empty($trade['estimated']) ? ' Est.' : ''; ?></td>
        <td><?php echo date('m/d/y', $trade['payout_date']); ?></td>
        <td><?php echo is_numeric($trade['total_dividend']) ? '$' . $trade['total_dividend'] : '&ndash;'; ?></td>
      </tr>
      <tr>
        <td><?php echo $trade['stock_type']; ?></td>
      </tr>
<?php } ?>

第二行 $trade['stock_type'] 是导致整个事情变得不稳定的原因。

我将在该行中添加用户可以隐藏或显示的评论，这就是为什么我需要交替颜色来跳过该行，并只应用上面的颜色..(每行都会变化在 foreach())

Answer 1

所以您想要的是一次交替 2 行。所以他们去dark dark, light light, dark dark

我认为，类似于@rusmus 的解决方案，您应该对行应用一个类。

把它放在你的 foreach 之前循环:

$black = true;
$rownumber = 0;

把它放在你的循环中

if(($rownumber % 2) == 0){//if the number is even
    $black = !$black;  //switch the state

    if($black){
        $class = 'blackRow';
    }else{
        $class = 'whiteRow';
    }
}  
$rownumber++;   

基本上我所做的是检查行号是否为偶数。如果是，那么我们将颜色从浅色切换为深色。

在你的表格行上做这样的事情: <tr class='<?php echo $class; ?>' >

这是一个键盘示例: http://codepad.org/JR4KOri4