交替的行颜色

时间:2011-11-03 07:31:35

标签: php html

我正在寻找一种解决方案,使用我的表中的交替颜色行设计来自csv。

我的代码:

<?php
echo "<table style='text-align: left; width: 99%;' border='1'>\n\n
<thead>
<tr>
<th>data</th>

</tr>
</thead>";
$f = fopen("local/datafiles.csv", "r");
while (($line = fgetcsv($f)) !== false) {
        echo "<tr class='odds'>";
        foreach ($line as $cell) {
                      echo "<td style='font-weight: bold;'>" . htmlspecialchars($cell) . "</td>";
        }
        echo "</tr>\n";
}
fclose($f);
echo "\n</table>";
?>

那么我怎么能让tr类从赔率甚至是替换? 感谢

4 个答案:

答案 0 :(得分:3)

有一个变量

int count = 0;

每次迭代都会增加计数,并按

采取模态

计算%2

if(count % 2 == 0)
color = red //(make color of row = red)

else
color = yellow //(make color of row = yello)

count=count+1;

这只是一个想法,你可以在你的代码中容纳这个

答案 1 :(得分:2)

<?php
echo "<table style='text-align: left; width: 99%;' border='1'>\n\n
<thead>
<tr>
<th>data</th>

</tr>
</thead>";
$f = fopen("local/datafiles.csv", "r");
$i = 0;
while (($line = fgetcsv($f)) !== false) {
    echo "<tr style='background-color: ".(($i%2)?'green':'blue').";'>";
    foreach ($line as $cell) {
        echo "<td style='font-weight: bold;'>" . htmlspecialchars($cell) . "</td>";
    }
    echo "</tr>\n";
    $i++;
}
fclose($f);
echo "\n</table>";
?>

或者你可以用同样的方式分配一个类并使用css设置它的样式。这是更好的做法。

答案 2 :(得分:2)

您可以使用css伪选择器:nth-​​of-type(odd | even)

http://reference.sitepoint.com/css/pseudoclass-nthoftype

如果表的ID是styledTable,则样式表将如下所示:

#styledTable {
 text-align: left;
 width: 99%;
 border: 1px solid black;
}

#styledTable tr:nth-of-type(even) {
 background-color: red;
}

#styledTable tr:nth-of-type(odd) {
 background-color: blue;
}

答案 3 :(得分:2)

我会通过CSS为您提供更好但更简单的解决方案。首先,唯一标识您的表格,我将向您展示更一般的选项。

table tr { backgroun: #ddd; }
table tr:nth-child(2n) { background: #ccc; }