PHP alternating colors - php

Question

$dbc = mysql_connect('localhost','root','') or die (mysql_error());
mysql_select_db('payroll') or die (mysql_error());
$sql = "SELECT * FROM employee ORDER BY employee_id DESC";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
echo "
<tr>
<td style=\"padding-left: 20px; border-bottom: 1px solid #999; border-right: 1px solid #999;\">".$row['first_name']." ".$row['last_name']."</td>
<td style=\"text-align: center; border-bottom: 1px solid #999; border-right: 1px solid #999; padding-top: 2px ; padding-bottom: 3px ;\"><input type=\"button\" name=\"edit\" value=\"Edit\" class=\"selbtn\"> <input type=\"button\" name=\"delete\" value=\"Delete\" class=\"selbtn\"></td>
</tr>
";
}
I wanted to add an alternating color in the loop. what code should I add?

Answer 1

$rowCount = 0;
$colorOne = '#ffffff';
$colorTwo = '#f3f3f3';
while($row = mysql_fetch_array($result)){
$rowColor = ($rowCount % 2) ? $colorOne : $colorTwo;
echo "<element bgcolor='$rowColor'></element>";
$rowCount++;
}
Edited after #Jayrox comment.

Answer 2

Use CSS classes instead of inline styles. They're easier to manipulate. Then style the .myclass_row_0 and .myclass_row_1 in your CSS for the alternate row color as well as .col1 and .col2 for the column styles.
$c=1; // or 0 (added after deceze's comment)
while($row = mysql_fetch_array($result)) {
$c=1-$c; // magic!
echo "
<tr class=\"myclass_row_$c\">
<td class=\"col1\">".$row['first_name']." ".$row['last_name']."</td>
<td class=\"col2\"><input type=\"button\" name=\"edit\" value=\"Edit\" class=\"selbtn\"> <input type=\"button\" name=\"delete\" value=\"Delete\" class=\"selbtn\"></td>
</tr>
";
}
Or using inline styles:
$colors = array('#ffffff','#f3f3f3');
$c=1;
while($row = mysql_fetch_array($result)) {
$c=1-$c;
echo "
<tr style=\"background-color:{$colors[$c]};\">
<!-- tds here -->
</tr>
";
}
Or using preset classes:
$styles = array('odd','even');
$c=1;
while($row = mysql_fetch_array($result)) {
$c=1-$c;
echo "
<tr class=\"{$styles[$c]}\">
<!-- ... -->
</tr>
";
}

Answer 3

There are already a lot of solutions, but this one use only two lines of css.
You can set specific css on even and odd rows:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Answer 4

Usually, I will declare an index(int) value and increment for each time through the loop. Then do a check to see if index mod 2 = 1. If so, then output a tr with the style that you want to apply to show an alternating row.
$color = 0;
while($row = mysql_fetch_array($result)) {
if($color % 2 == 1){
echo "<tr>";
}else{
echo "<tr class=\"altRow\">";
}
echo "
<td style=\"padding-left: 20px; border-bottom: 1px solid #999; border-right: 1px solid #999;\">".$row['first_name']." ".$row['last_name']."</td>
<td style=\"text-align: center; border-bottom: 1px solid #999; border-right: 1px solid #999; padding-top: 2px ; padding-bottom: 3px ;\"><input type=\"button\" name=\"edit\" value=\"Edit\" class=\"selbtn\"> <input type=\"button\" name=\"delete\" value=\"Delete\" class=\"selbtn\"></td>
</tr>
";
$color++;
}

Answer 5

As it's bumped already, here is my 5 cents.
7 answers and not a single one using templates.
We can write a thousand articles of the templates necessity, but such an examples will always win.
So, based on the OP's code and stagas' answer:
business logic part:
$c = 1;
$DATA = array();
$sql = "SELECT * FROM employee ORDER BY employee_id DESC";
$result = mysql_query($sql) or trigger_error(mysql_error().$sql);
while($row = mysql_fetch_array($result)) {
$row['c'] = $c=1-$c;
$DATA[] = $row;
}
and template part:
<tr class="myclass_row_<?=$row['$c']?>">
<td class="col1"><?=$row['first_name']?> <?=$row['last_name']?></td>
<td class="col2">
<input type="button" name="edit" value="Edit" class="selbtn"> <input type="button" name="delete" value="Delete" class="selbtn">
</td>
</tr>

Answer 6

$color = 1;
while($row = mysql_fetch_array($result)) {
if($color == 1){
echo "
<tr>
<td style=\"padding-left: 20px; border-bottom: 1px solid #999; border-right: 1px solid #999;\">".$row['first_name']." ".$row['last_name']."</td>
<td style=\"text-align: center; border-bottom: 1px solid #999; border-right: 1px solid #999; padding-top: 2px ; padding-bottom: 3px ;\"><input type=\"button\" name=\"edit\" value=\"Edit\" class=\"selbtn\"> <input type=\"button\" name=\"delete\" value=\"Delete\" class=\"selbtn\"></td>
</tr>
";
$color = 2;
}
else
{
echo "
<tr>
<td style=\"padding-left: 20px; border-bottom: 1px solid #555; border-right: 1px solid #555;\">".$row['first_name']." ".$row['last_name']."</td>
<td style=\"text-align: center; border-bottom: 1px solid #555; border-right: 1px solid #555; padding-top: 2px ; padding-bottom: 3px ;\"><input type=\"button\" name=\"edit\" value=\"Edit\" class=\"selbtn\"> <input type=\"button\" name=\"delete\" value=\"Delete\" class=\"selbtn\"></td>
</tr>
";
}
$color = 1;
}

Answer 7

// here it is in less code
<?php
$dbc = mysql_connect('localhost','root','') or die (mysql_error());
mysql_select_db('payroll') or die (mysql_error());
$sql = "SELECT * FROM employee ORDER BY employee_id DESC";
$result = mysql_query($sql);
$colors = array('FFF', '000000'); // valid hex colors
$numOfColors = sizeOf($colors); $i = 0
while($row = mysql_fetch_array($result)) {
$i++;if($i>$numOfColors){$i=0;}
?>
<tr>
<td style="padding-left: 20px; border-bottom: 1px solid #<?=$colors[$i]?>; border-right: 1px solid #<?=$colors[$i]?>;"> <?=$row['first_name']?> <?=$row['last_name']?> </td>
<td style="text-align: center; border-bottom: 1px solid #<?=$colors[$i]?>; border-right: 1px solid #<?=$colors[$i]?>; padding-top: 2px ; padding-bottom: 3px ;"><input type="button" name="edit" value="Edit" class="selbtn"> <input type="button" name="delete" value="Delete" class="selbtn"></td>
</tr>
<?php
}
?>

Answer 8

Just keep track whether it is an alternating row with a Boolean. Initialize it to false before your loop, not it for each iteration, then you can set the row style based on its value. Something like:
...
$isAlternatingRow = false;
while($row = mysql_fetch_array($result)) {
echo "
<tr class=\"" . $isAlternatingRow ? "defaultRow" : "alternatingRow" . "\">
<td style=\"padding-left: 20px; border-bottom: 1px solid #999; border-right: 1px solid #999;\">".$row['first_name']." ".$row['last_name']."</td>
<td style=\"text-align: center; border-bottom: 1px solid #999; border-right: 1px solid #999; padding-top: 2px ; padding-bottom: 3px ;\"><input type=\"button\" name=\"edit\" value=\"Edit\" class=\"selbtn\"> <input type=\"button\" name=\"delete\" value=\"Delete\" class=\"selbtn\"></td>
</tr>
";
$isAlternatingRow = !($isAlternatingRow);
}
Then just define styles for tr.defaultRow td and tr.alternatingRow td.

Answer 9

$class="even"
while($row = mysql_fetch_array($result))
{
if($class == "even")
{
echo "<tr class='$class'>";
$class="odd"
}
else
{
echo "<tr class='$class'>";
$class="even";
}
...
}

Answer 10

I did it like this:
Remember to add a CSS class called "even", with styling of course.
<?php
include 'connect.php';
echo "<table id='hor-zebra'>";
$i = 0;
while($row = mysql_fetch_array($result))
{
if($i % 2 == 0)
{
echo "<tr class='even'>";
echo "<td>" . $row['something'] . "</td>";
echo "</tr>";
}
else
{
echo "<tr>";
echo "<td>" . $row['something'] . "</td>";
echo "</tr>";
}
$i++;
}
echo "</table>";
mysql_close($con);
?>

Answer 11

Using predefined color outside the loop.
$rowCount = 0;
$color = array('#ffffff','#f3f3f3');
while($row = mysql_fetch_array($result)){
$i = ($rowCount % 2);
echo "<element bgcolor='".$color["$i"]."'></element>";
$rowCount++;
}