Some ideas on making odd & even rows to color in with CSS

[Shadowing]

Hey guys I have a few pages where im echoing in one row at a time. Like for a email system. I want to color in every other row with CSS.

since im echoing in one row at a time i cant place a class on every other row saying which one is even or odd. wondering what are some ideas on how to do this.

 

One idea i had was maybe assign a number to each row then maybe a php math function to find if a number is odd or even? like to know if there is a correct or standard way to do this.

typed a small little example below

           $list3 = "SELECT message FROM pm WHERE id = '".($_SESSION['user_id'])."'";
           $list2 = mysql_query($list3) or trigger_error("SQL", E_USER_ERROR);	
while ($list = mysql_fetch_assoc($list2)) { 
?>

<td class="odd"><?php echo $list['message']; ?></td> 

<?php } ?>

A picture to show what I mean by coloring every other row

[Pikachu2000]

Use an incrementing counter and check for a zero remainder from modulus 2

 

$i = 1;
while( $array = mysql_fetch_assoc($whatever) ) {
$class = $i % 2 === 0 ? 'even' : 'odd';
     echo "<your table row stuff class=\"$class\"> etc.";
     $i++;
}

[scootstah]

Or use CSS.

tr:nth-child(odd) { background: #fff; }
tr:nth-child(even) { background: #000; }

[Shadowing]

thanks Pikachu2000 that works

 

ive seen people use 3 equal signs before in a row what does that mean? I just googled it and came up with no results. what is that question mark basicly saying? is it basicly just making a switch?

 

scootstah

im confused. do i put that inline or external.

[JonnoTheDev]

scootstah

im confused. do i put that inline or external.

 

In a stylesheet

 

ive seen people use 3 equal signs before in a row what does that mean?

Its a comparison operator. Is equal to.

 

what is that question mark basicly saying?

Shorthand conditional statement i.e if/else

$class is equal to even or odd based on the result of $i % 2 being equal to 0 or not i.e

 

if(($i % 2) === 0) {
$class = 'even';
}
else {
$class = 'odd';
}

[Shadowing]

thanks Neil.

 

damn i wish i would of known that a long time ago lol.

i did a ton of if statements i could of used that instead. I think in future i'll go back over pages and replace some code with that. Cause that is alot easier to read

 

if i put that in a style sheet. what if i have tr's on the page i dont want color

 

i guess i dont understand how this css is working

im taking it as its global for the page and it just starts the first <tr> as odd and then the next as even?

[JonnoTheDev]

I think in future i'll go back over pages and replace some code with that. Cause that is alot easier to read

Not always easier. have a look at some examples:

 

http://davidwalsh.name/javascript-shorthand-if-else-examples

 

if i put that in a style sheet. what if i have tr's on the page i dont want color

You would give them a different class or only use a class on the tr's that you want to cycle between colours.

i guess i dont understand how this css is working

If CSS isn't your thing dont worry about it. Look at CSS when you get chance. Here's some tutorials

 

http://www.w3schools.com/css/

[Adam]

Support for the ":nth-child" CSS pseudo-selector isn't quite dependable just yet by the way; <= IE8 has no support at all. You can remedy that with jQuery if you wish though.

[kicken]

if i put that in a style sheet. what if i have tr's on the page i dont want color

 

Use a class to limit it.  Eg:

<table class="alternatingRows">
  ...
</table>

 

then in your css file:

table.alternatingRows tr:nth-child(odd) { background: #fff; }
table.alternatingRows tr:nth-child(even) { background: #000; }

 

That will make the css rules apply only to tr elements inside a table which has the alternatingRows class.

 

 

i guess i dont understand how this css is working

im taking it as its global for the page and it just starts the first <tr> as odd and then the next as even?

 

:nth-child is a pseudo class that checks what the elements position is in it's parent.  It can be use to identify a particular child number, or set of childs (eg, odd or even). Read the documentation about it for more details

 

It's a fairly new selector that only recently got supported in some browsers, that is why you find a lot of people generating odd/even class names and using those instead of the css.

 

 

[scootstah]

ive seen people use 3 equal signs before in a row what does that mean?

 

3 equal signs is a comparison operator that also checks type. For example...

$str = '17';

if ($str == 17) {
// true
}

if ($str === 17) {
// false
}

 

The first if() returns true, because there is no type checking. '17' and 17 evaluate to the same.

 

The second if() returns false because they are not the same type. '17' is a string and 17 is an integer.

 

This operator is most commonly used for booleans. The reason is that in PHP as long as a variable holds a value (must be at least a positive number and not zero) it will evaluate to true, even if it's not a boolean.

$str = '17';

if ($str == true) {
// true
}

 

So this if() will return true, because $str holds a value. If you wanted to actually see if $str holds the boolean "true", you'd need 3 equal signs.

$str = '17';

if ($str === true) {
// false
}

 

Hope that helps.

[Shadowing]

That all helps out alot. Perfect examples scootstah

 

thanks alot guys