PHP alternating colors

1
votes
  $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\">&nbsp;<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?

11
php

11 Answers

7
votes
$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.

3
votes

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\">&nbsp;<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>
  ";
}
3
votes

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}
2
votes

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\">&nbsp;<input type=\"button\" name=\"delete\" value=\"Delete\" class=\"selbtn\"></td>
  </tr>
  ";
  $color++;
}
2
votes

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">&nbsp;<input type="button" name="delete" value="Delete" class="selbtn">
  </td>
</tr>
1
votes
$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\">&nbsp;<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\">&nbsp;<input type=\"button\" name=\"delete\" value=\"Delete\" class=\"selbtn\"></td>
  </tr>
  ";
  }
$color = 1;
}
1
votes
// 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">&nbsp;<input type="button" name="delete" value="Delete" class="selbtn"></td>
  </tr>

<?php

  }
?>
1
votes

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\">&nbsp;<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.

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

  ...

}
0
votes

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);
?>
0
votes

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