将背景应用于动态生成的表中的第一行和第三行 [英] applying background to first, and every third row in a dynamically generated table
问题描述
我有一个表，它的行是动态生成的。我隐藏了第二行，因此如果用户选择这样做，用户可以扩展该行。我需要为每个第一行和第三行都有一个交替的背景，第二行将采用该行之前的背景颜色。下面是一张照片来帮助解释：
CSS I我现在使用的是这样的：（由@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-wrapperid =monthly-payers>
< thead>
< tr>
< th class =optional>成本< br>基础< / th>
< th>当前< br>价格< / th>
< th> Stock< br / gt>返回％< / th>
< th>购买< br>在< / th>
股息< th>收益< / th>
< th>除息日< br>日期< / th>
< th class =persist>付款< br>日期< / th>
累积< br>股息< / 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']）？ ' 美东时间。' ： ''; ？>< / TD>
< td><？php回复日期（'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（）中的每一行而变化）
所以你想要的是行一次交替2。所以他们去了暗黑暗，光线明亮，黑暗黑暗
我认为，类似于@rusmus解决方案，您应该向行申请一个类。
把它放在你的 foreach 循环之前：
$ black = true;
$ rownumber = 0;
把它放在循环中
<$ p $如果（（$ rownumber％2）== 0）{//如果数字是偶数
$ black =！$ black; //切换状态
if（$ black）{
$ class ='blackRow';
} else {
$ class ='whiteRow';
}
}
$ rownumber ++;
基本上我所做的是检查行号是否均匀。如果是这样，那么我们将颜色从浅转换为黑。
在您的表格行上做这样的事情：
< ; tr class ='<？php echo $ class; >'>
以下是一个键盘示例：
http://codepad.org/JR4KOri4
I have a table that its' rows are dynamically generated. I am hiding the second row so the user can expand that row if he or she chooses to do so. I need to have an alternating background for every first and third row, and the second row will take the background color of the row before it.. Here's a picture to help explain:
The CSS I am currently using is this: (Provided from @rusmus)
.tbody tr:nth-child(4n), tbody tr:nth-child(4n- 1){
background-color: #FF0000;
}
And here is a link to his working example: http://jsfiddle.net/Lutkz/1/
For some reason though, it's not applying the color to the after the affected like the jsfiddle
Side note: The whole table is in a foreach() that displays each row from the database into the table.
Code of the table:
<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'] : '–'; ?></td>
<td><?php echo is_numeric($trade['entry_price']) ? '$' . sprintf("%.02f", $trade['entry_price']) : '–'; ?></td>
<td><?php echo is_numeric($trade['current_price']) ? '$' . sprintf("%.02f", $trade['current_price']) : '–'; ?></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']) : '–'; ?></td>
<td><?php echo is_numeric($trade['dividend_yield']) ? sprintf("%.02f", $trade['dividend_yield']) . '%' : '–'; ?></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'] : '–'; ?></td>
</tr>
<tr>
<td><?php echo $trade['stock_type']; ?></td>
</tr>
<?php } ?>
That second row, $trade['stock_type'] is what is causing the whole thing to go wonky.
I am going to have comments in that row that the user can hide, or show, that's why I need the alternating color to skip that row, and just apply the color of the above it.. (which changes with each row in the foreach())
So what you're wanting is for the rows to alternate 2 at a time. So they go dark dark, light light, dark dark
I think, similar to @rusmus solution, you should apply a class to the rows.
Put this right before your foreach loop:
$black = true;
$rownumber = 0;
Put this in your loop
if(($rownumber % 2) == 0){//if the number is even
$black = !$black; //switch the state
if($black){
$class = 'blackRow';
}else{
$class = 'whiteRow';
}
}
$rownumber++;
Basically what I've done is check if the row number is even. If it is, then we switch the color from being light to dark.
On your table row do something like this:
<tr class='<?php echo $class; ?>' >
Here's a codepad example: http://codepad.org/JR4KOri4
这篇关于将背景应用于动态生成的表中的第一行和第三行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
