Question

我有一个表，它的行是动态生成的。我隐藏了第二行，因此如果用户选择这样做，用户可以扩展该行。我需要为每一行和第三行都有一个交替的背景，第二行将采用它之前的行的背景颜色。这是一张图片来帮助解释：

enter image description here

我目前使用的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

为什么在一行信息中使用两行？您可以在“Advent Claymore Convertible Securities＆amp; Income Fund”之后放置一个换行符<br/>，然后在下一行显示t并获得您想要的颜色。像这样：

<td><?php echo $trade['security']; ?><br/><?php echo $trade['security']; ?></td> 而不是

<td><?php echo $trade['security']; ?></td>

Answer 2

您可以将一个类应用于您想要具有不同背景的行，并在css中定位该类。

但如果您想在不修改标记的情况下执行此操作，则可以执行以下操作：

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

以上选择每隔4行以及它之前的行。举例说明：

<table>
    <tr><td>Foo</td></tr>
    <tr><td>Foo</td></tr>
    <tr><td>Foo</td></tr> <!-- row 4n - 1 (for n=1) -->
    <tr><td>Foo</td></tr> <!-- row 4n (for n=1) -->
    <tr><td>Foo</td></tr>
    <tr><td>Foo</td></tr>
    <tr><td>Foo</td></tr> <!-- row 4n - 1 (for n=2) -->
    <tr><td>Foo</td></tr> <!-- row 4n (for n=2) -->
    <tr><td>Foo</td></tr>
    <tr><td>Foo</td></tr>
</table>

小提琴：http://jsfiddle.net/Lutkz/1/

选中使用chrome，firefox，ie11，ie10和ie9。

Answer 3

所以你想要的是一次交替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

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

3 个答案: