Format Alternate Rows in Different Colours

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
okelly
Forum Commoner
Posts: 29
Joined: Thu Feb 23, 2006 2:18 pm

Format Alternate Rows in Different Colours

Post by okelly »

Hello folks

I'm attemping to format alternate rows in a table with different colours
I reckon I'm missing a "foreach" command and equally that line 27 "$row = mysql_fetch_assoc($data))" is probably wrong..
I just can't figure it out.
Can anybody kindly volunteer the correct syntax?

Thanks very much
Conor

Code: Select all

 
<?php
include("../admin/config.php");
    
// fetch the project listings from the projects database
// count the number of data entry rows in the database
$data = mysql_query("SELECT projects.id, projects.name, projects.cat FROM projects ORDER BY projects.id ASC");
$rows = count($data);
 
// the two row colors to switch between
$rowcolor1 = '#F0F0F2';
$rowcolor2 = '#FFFFFF';
 
// the background colors on mouseover
$hovercolor1 = '#BAD4EB';
$hovercolor2 = '#DCE9F4';
 
echo '
<table style="caption-side: top; 
    border: 0.1em solid #eee;
    border-collapse: collapse; 
    margin: 1em; 
    width: 30em;">
    <caption style="font-weight: bold;">Demonstration of alternate row colors</caption>';
 
for($n = 0; $n < $rows; $n++)
$row = mysql_fetch_assoc($data))
{
    // this is where the magic happens
    if($n % 2 == 1)
    {
// add more things to swop with each cycle
        $style = $rowcolor1;
        $hoverstyle = $hovercolor1;
    }else{
        $style = $rowcolor2; 
        $hoverstyle = $hovercolor2;
    }
 
    echo '
    <tr id="row'.$n.'" style="background:'.$style.';"
        onmouseover="this.style.background=\''.$hoverstyle.'\'"
        onmouseout="this.style.background=\''.$style.'\'">
        <td style="padding: 0.3em 1em;">'.$data[$n].'</td>
    </tr>';
}
 
echo '
</table>';
      
?>
 
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Format Alternate Rows in Different Colours

Post by omniuni »

before the loop:

Code: Select all

$color = "red";
at each iteration

Code: Select all

$color = ($color == "red")?($color = "blue"):($color = "red");
that should alternate the value of "color" as it runs.

insert into a <tr> as follows:

Code: Select all

<tr style="background-color: <?php echo $color; ?> ">
I think that should do what you need.
okelly
Forum Commoner
Posts: 29
Joined: Thu Feb 23, 2006 2:18 pm

Re: Format Alternate Rows in Different Colours

Post by okelly »

thnx Omniuni..got it fixed..
I eventually settled on

Code: Select all

 
<?php
include("config.php");
 
// Displays alternate table row colors
function row_color($i){
$bg1 = "#F2F2F2"; // color one 
$bg2 = "#F7F7F7"; // color two
 
if ( $i%2 ) {
return $bg1;
} else {
return $bg2;
}
}
 
// Database Query 
$sql = "SELECT projects.id, projects.name, projects.cat FROM projects ORDER BY projects.id ASC"; 
$result = mysql_query("$sql"); // Database Query result
 
// Starts the table
echo "<table bgcolor=#FFFFFF border=0 cellpadding=1 cellspacing=1>\n";
 
// Create the contents of the table.
for( $i = 0; $i < $row = mysql_fetch_array($result); $i++){
echo "<TR>\n"
."<TD bgcolor=".row_color($i).">".$row["id"]."</TD>\n" 
."<TD bgcolor=".row_color($i).">".$row["name"]."</TD>\n"
."<TD bgcolor=".row_color($i).">".$row["cat"]."</TD>\n" 
."</TR>";
}
echo "</TABLE>"
?>
 
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Format Alternate Rows in Different Colours

Post by omniuni »

Cool, I'm glad you got it working.

Remember, HTML is all lowercase (<td>, not <TD>) and while bgcolor is valid enough, it is much better practice to use one style="background-color: [color];". Also, you may still want to look into that ternary operator, it is very useful for things like this.

-OmniUni

NOTE: Also, if you use instead a class="color1" and class="color2" it lets you set the background with CSS, so you can restyle your website easier. When possible, it is usually best to abstract your styling so that the HTML is as clean as possible.
Post Reply