PDA

View Full Version : css color for tr dynamically change


houssam_ballout
12-27-2006, 05:32 AM
Hello all
am creating a table that is called throughout a function in php, and this will generate a table: that table wil have a lot of rows,
my question is that: I need to have 2 colors, and for example: row 1 has color 1, row 2 has color 2, row 3 has color 1, row 4 has color 2, ......
just to differentiate them
Thanks

kapaha
12-27-2006, 07:50 AM
Well, first a look to the future, something to keep in mind: the nth-child CSS class.

One day, when it's implemented, this will be as simple as:


tr:nth-child(2n+1) /*that's all the odd ones*/
{
background-color: #0000ff;
}
tr:nth-child(2n) /*that's all the even ones*/
{
background-color: #ffffff;
}


Sadly, this isn't implemented yet, but keep that in mind.

Instead, I can only make a recommendation, since I've no code of yours to play with.

I suggest you make loop of sorts with php, which you have no doubt done, that makes the table, evaluate whether or not the loop is on an odd or even number and apply a class of "odd" or "even" to the <tr>s accordingly.

I could show you how this would would be done in the context of your code if you want to send a little snippet over. :D
Then all you'd need would be this CSS in you stylesheet:


tr.odd /*that's all the odd ones*/
{
background-color: #0000ff;
}
tr.even /*that's all the even ones*/
{
background-color: #ffffff;
}


or whatever colours you want, and that would work a treat.

I'll try to give a little example, it would look a bit like this:


for ($i=1; $i <= 10; $i++)
{
if ($i/2 == floor($i/2))
{
$class= "even";
}
else
{
$class= "odd";
}
echo("<tr class='$class' etc...
}


See what I'm saying?

All floor does it round the number down, so that if statement checks to see whether the number divided by two is equal to the number divided by two, rounded down, if it is, then it's even :D

¥åßßå
12-27-2006, 08:23 AM
How about an alternative that involves slightly less math? ;)
<?php
$even = false;
for( $i = 0; $i < 10; $i++ )
{
echo '<tr class="'.( ( $even = !$even ) ? 'odd' : 'even' ).'">.........';
}
?>

¥

kapaha
12-27-2006, 08:43 AM
I've never known how to use that method properly, but seeing it there helps.

See, you learn as much from answering questions as you do by asking them. :D

The method you suggested should work without setting $even= false; since by not defining it, $even is by nature false. :burnt:

¥åßßå
12-27-2006, 08:50 AM
See, you learn as much from answering questions as you do by asking them. :D

Definately ;)

¥

Josh Inno
12-27-2006, 12:58 PM
So when you set $even = !$even, it inverts the value of even, and then the return from that assignment is the value that was assigned?

¥åßßå
12-27-2006, 02:09 PM
in a nutshell, yes

¥

*edit*
The method you suggested should work without setting $even= false; since by not defining it, $even is by nature false
Notice: Undefined variable: even in <file>
By nature $even is "undefined" ;)

houssam_ballout
12-28-2006, 07:05 AM
well, I've done it using the even and odd classes created in the css file, and then in the for loop for the table, I've checked if i is even or odd and use the associated class
Thanks