Javascript 将后台应用于动态生成表中的第一行和每三行

我有一个表，它的行是动态生成的。我正在隐藏第二行，以便用户可以在选择展开该行时展开该行。我需要为第一行和第三行交替设置背景，第二行将采用它前面的行的背景色。。这里有一张图片可以帮助解释：

我目前使用的CSS如下：（由@rusmus提供）

下面是他工作示例的链接：

但出于某种原因，它并没有像JSFIDLE那样将颜色应用到受影响的后面

旁注：整个表位于一个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（）中的每一行都会发生变化）

为什么要用两行表示一行信息？ 您可以将换行符

放在“更多可转换证券和收益基金”之后，然后在下一行显示

t

，您可以获得所需的颜色。像这样：

而不是

---

您可以将一个类应用于希望具有不同背景的行，并以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>

福
福
福
福
福
福
福
福
福
福

小提琴：

---

已选中在chrome、firefox、ie11、ie10和ie9中工作。

因此，您需要的是一次将行替换为2。所以他们走了

黑暗，光明，黑暗

我认为，与@rusmus solution类似，您应该对行应用一个类

将此项放在

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

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

在您的表行上执行以下操作：

---

这是一个不错的解决方案，但Chrome32i中似乎不支持它。我在chrome&Firefox中加载了该示例，但在这两种浏览器中似乎都不起作用。谢谢你在这件事上的帮助，伙计！你就是那个人！让我把它插入我的代码并测试它@Rusms你能编辑你的答案，简单解释一下CSS在做什么，以及它是如何为我/未来的人提供帮助的吗@rusmusAlright所以我插入了它，它看起来是这样的：出于某种原因，它不会将更改应用到红色下面的行。如果我在security name列中有第二行，注释将不会占据表的100%宽度。它会被挤到角落里，上面写着安全名称。为了安全起见，我希望注释占据表中其余内容下方的100%@例如，你可以使用
标记来代替表格行并相应地设置样式，那么你就不需要高级css选择器。当我在表格中使用div标记时，它会从表格中分离出来并显示在其上方。你的意思是表中的每个普通行都有一个注释行。。。你真的想让这些行成对地呈现相同的颜色吗。我希望第一行和第二行看起来像一对具有相同背景（绿色），然后第三行和第四行看起来像一对具有相同背景（白色），依此类推on@rusmusI做了一把新小提琴，我想它解决了你的问题。我已使用新链接更新了我的答案。我已将if（$rownumber%2）==0）{//如果该数字为偶数，则更改为>if（$rownumber%1）==0）{//如果数字是偶数，效果很好！你能更新你的答案，让2=1，让其他人看到正确的答案吗？谢谢，伙计！嗯……我不知道如何更改模数才能让它工作。你确定你没有其他人的代码仍然处于活动状态。例如，@rusmus solution很好，如果你有bot实现h解决方案时，his可能优先。如果您将除数更改为1，则此代码将无法工作。这是指向模数文档的链接，我添加了一个代码板示例。您可以更改设置以确认一种方法优于另一种方法。我删除了@rusmus的所有代码，当我用1代替2时，它可以工作毫无疑问。没有其他修改过的代码，什么都没有。我不太确定交易是什么，但我排除了你的答案。我认为这表明你有一些行被css隐藏了，或者你的html不知何故被破坏了。@TimSum给出的答案肯定是正确的，我自己的答案适用于IE9+、Firefox和Chrome，所以肯定有什么进展关于你的标记，我们没有看到。。。
if(($rownumber % 2) == 0){//if the number is even
    $black = !$black;  //switch the state

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