交替的行颜色

Question

I am looking for a solution to use the alternating colors row design in my table which is from a csv.

my code:

<?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>";
?>

so how can i have the tr class to alternate from odds and even? thanks

Answer 1

have a variable

int count =0;

increment count on every iteration and take modolous by

count % 2

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

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

count=count+1;

thats just an idea, u can accomodate this in ur code

Answer 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>";
?>

Or you could assign a class just the same way and style it using css. This is much better practice.

Answer 3

You could use the css pseudo-selector :nth-of-type(odd|even)

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

If the ID of the table is styledTable, your stylesheet would look like:

#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;
}

Answer 4

I will give you a better but much simpler solution, through CSS. First of all uniquely identify your table, i will show you a more general option.

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