how do i set alternating row background colors?

[jbrill]

Im trying to create alternation rows for a table.. heres my code:

<?
echo '<table border="0" bgcolor="#ffffff" class="MainBody1" width="50%" align="center">';
$result = mysql_query("SELECT * FROM workhours WHERE jobid='".$jobid."' AND stepid='".$idr."'");
while($row = mysql_fetch_array($result))
{

echo '<tr>';
echo '<td width="80" class="underline">'. $row['date'] .'</td>';
echo '<td width="120" class="underline">'. $row['name'] .'</td>';
echo '<td width="80" class="underline">'. $row['hours'] .'</td>';
echo '<td class="underline">'. $row['notes'] .'</td>';
echo '</tr>';
}
echo '</table><br>';
?>

 

how would i alternate background colors so that one is white and the next is #cccccc and then white and so on...

 

 

[tc48]

I do a for loop that spits out the html for the row then inside the for loop i have an if statment. $

 

for($i=0;$i<=$numberofrows;$i++){

HTMLCODEFORROWHERE

if($i%2==0){

echo 'codeforonebgcolor';

}else{

echo 'codeforotherbgcolor';

}

}

[teng84]

inside you loop put a $ctr++;

then hae a condition like

 

if ($ctr%2==0)

{

$color='your color here'

}

else{

$color='your color here'

}

echo '<tr bgcolor='.$color.'>';

 

something like that

[jbrill]

can u put that into my code in the first post? i really have no clue... new to php

[Azu]

Do this with CSS not PHP.

[AndyB]

can u put that into my code in the first post? i really have no clue... new to php

 

Try it yourself. If it works, you'll have learned something. If it doesn't you'll have learned something and can come back with your modified code for more help.  We help you, not code for you.

[jbrill]

Do this with CSS not PHP.

how would this be done in css? i would prefer using css actually

[jbrill]

anyone?

[jchemie]

anyone?

 

 

Hey,

 

Here is your code

<?
echo '<table border="0" bgcolor="#ffffff" class="MainBody1" width="50%" align="center">';
$result = mysql_query("SELECT * FROM workhours WHERE jobid='".$jobid."' AND stepid='".$idr."'");
while($row = mysql_fetch_array($result))
{
$css_class = ($css_class=='row_style_1') ? 'row_style_2' : 'row_style_1';
echo "<tr class='$css_class'>";
echo '<td width="80" class="underline">'. $row['date'] .'</td>';
echo '<td width="120" class="underline">'. $row['name'] .'</td>';
echo '<td width="80" class="underline">'. $row['hours'] .'</td>';
echo '<td class="underline">'. $row['notes'] .'</td>';
echo '</tr>';
}
echo '</table><br>';
?>

 

AND HERE is the CSS CODE FOR IT

<style type='text/css'>
.row_stlye_1
{
    background-color: #eaeaea;
}
.row_stlye_2
{
    background-color: #ffffff;
}

</style>

 

That should be it.

 

Thanks

 

Jyot

[jbrill]

hmmm  didnt appear to work... i noticed a spelling error in your css where it says stlye, so i changed  it to say style and still nothing...

[Oldiesmann]

Try this:

<style type='text/css'>
.row_style_1, .row_style_1 td
{
    background-color: #eaeaea;
}
.row_style_2, .row_style_2 td
{
    background-color: #ffffff;
}
</style>

 

Otherwise it's just applying the style to the row itself, and not to the individual table cells.

[jbrill]

still no luck...

[Oldiesmann]

Try removing bgcolor="#ffffff" from the table tag and see if that makes any difference.

 

Also, try changing the color values for row_style_1 and/or row_style_2 to see if that changes the output - it may at least help us see if it's actually changing the background color.

[Yesideez]

Try holding down CTRL and pressing F5 to force the browser to reload everything. I know IE has a problem caching the style sheets and other stuff and although you're making changes they might not be loading up.

[jbrill]

on a mac, on safari, camino, firefox for testing

[AndyB]

Have you looked at the source of the generated html code?  Does it show something that doesn't make HTML sense?

[jbrill]

the source code looks like the tables are getting the classes, but the styles arent actually stylizing

 

 

[Yesideez]

Try CTRL F5 on Safari - it's been a while since I used the Mac downstairs...

[AndyB]

the source code looks like the tables are getting the classes, but the styles arent actually stylizing

 

Could you post the CSS you are actually using, as well as post only enough of the generated HTML code to show us two complete rows of your table.

[jbrill]

ok, here is the php code using the css:

<?
echo '<table border="0" bgcolor="#ffffff" class="MainBody1" width="50%" align="center" cellpading="0" cellspacing="0">';
echo '<tr><td class="underline">Date</td><td class="underline">Name</td><td class="underline">Hours</td><td class="underline">Notes</td>';
$result = mysql_query("SELECT * FROM workhours WHERE jobid='".$jobid."' AND stepid='".$idr."'");
while($row = mysql_fetch_array($result))
{

$css_class = ($css_class=='row_style_1') ? 'row_style_2' : 'row_style_1';
echo "<tr class='$css_class'>";
echo '<td width="80">'. $row['date'] .'</td>';
echo '<td width="120">'. $row['name'] .'</td>';
echo '<td width="80">'. $row['hours'] .'</td>';
echo '<td>'. $row['timenotes'] .'</td>';
echo '</tr>';
}
echo '</table><br>';
?>

 

Here is the css code in my attached style sheet:

.row_style_1, td.row_style_1
{
    background-color: #eaeaea;
}
.row_style_2, td.row_style_2
{
    background-color: #ffffff;

 

and here is the source code it produces:

<table border="0" bgcolor="#ffffff" class="MainBody1" width="50%" align="center" cellpading="0" cellspacing="0"><tr><td class="underline">Date</td><td class="underline">Name</td><td class="underline">Hours</td><td class="underline">Notes</td><tr class='row_style_1'><td width="80">12-07-2007</td><td width="120">Jordan </td><td width="80">12</td><td>be careful needs new blade</td></tr><tr class='row_style_2'><td width="80">12-07-2007</td><td width="120">Jordan </td><td width="80">10</td><td>test</td></tr><tr class='row_style_1'><td width="80">12-07-2007</td><td width="120">Jordan </td><td width="80">5</td><td></td></tr></table><br>

 

 

 

 

[AndyB]

I took your generated html and style and combined them. It produces alternate colour rows .... once you add the closing curly brace to the CSS

 

.row_style_1, td.row_style_1
{
    background-color: #eaeaea;
}
.row_style_2, td.row_style_2
{
    background-color: #ffffff;
}