Alternating row colour in a table

[antknight]

Usually I would ask such a question on Stack Overflow but I thought it might benefit others using PW

I would like each row of the table to have alternating colours (classes?) for better readability

foreach($country->children() as $dealer) {
		   $url = str_replace('http://', '', $dealer->website);
				   echo "<tr id='{$dealer->title}' name='{$dealer->title}' class='reviews-row1'><td><strong>{$dealer->title}</strong><br>{$dealer->map_marker->address}</td>";
				   echo "<td>{$dealer->telephone}</td>";
				   echo "<td>Website: <a href='{$dealer->website}' target='_blank'>{$url}</a><br>Email: <a href='mailto:{$dealer->email_address}'</a>{$dealer->email_address}</td>";
				   echo "</tr>";
		   }

I found a few answers here but once again it's my lack of knowledge of the syntax that is letting me down.Would anyone be kind enough to help me out?

[Joss]

With CSS 3:

tr:nth-child(odd)    { background-color:#ccc; }
tr:nth-child(even)    { background-color:#666; }

Or, there is this JQuery to add classes (I haven't tried this, just stole it....)

<script type="text/javascript">
 $(document).ready(function() {
   $(".myTable tr:even").addClass("bgOne");

   $(".content div:odd").addClass("bgTwo");
 });
</script>

Joss

[diogo]

You could do it easily adding classes with PHP, but CSS allows you to do this:

tr:nth-child(odd){
 background-color: red;
}
tr:nth-child(even){
 background-color: blue;
}

edit: Joss was faster

and mine would be a damn ugly table...

[antknight]

So you wouldn't recommended doing it within the PHP?

[diogo]

It's a style thing. If you can do it with CSS, do it with CSS

It won't work on old browsers, but this is where I think the degradation is perfectly acceptable.

[arjen]

antknight,

Check out this thread. It has some nice alternatives and you might pick something up along the way.

[antknight]

Amazing support once again. Here is the code I used for anyone interested:

foreach($country->children() as $key => $dealer) {
		   $class = ($key % 2 ? 'odd' : 'even'); 
		   $url = str_replace('http://', '', $dealer->website);
				   echo "<tr class='$class' id='{$dealer->title}' name='{$dealer->title}' class='reviews-row1'><td><strong>{$dealer->title}</strong><br>{$dealer->map_marker->address}</td>";
				   echo "<td>{$dealer->telephone}</td>";
				   echo "<td>Website: <a href='{$dealer->website}' target='_blank'>{$url}</a><br>Email: <a href='mailto:{$dealer->email_address}'</a>{$dealer->email_address}</td>";
				   echo "</tr>";
		   }

[onjegolders]

This is something I need to do a lot when I'm using columned layouts, it's not the sort of thing you always want to rely on CSS3 or JS for.

Don't know if it's possible or even desirable but I did used to like the "switch" class available in ExpressionEngine. Would be something like:

<div class="switch{left|centre|right}"></div>

And it would just loop through them. Was just a useful function to avoid having to set counters and use modulus which I always end up fighting with.

http://ellislab.com/expressionengine/user-guide/modules/channel/channel_entries.html#switch

[AnotherAndrew]

Personally, I would do it with jquery versus CSS3 since javascript will be supported by all browsers.

Unless of course, javascript it turned off. Its 2012. Who browses without javascript?

[Martijn Geerts]

Who browses without javascript?

me (sometimes)

[Adam Kiss]

Don't know if it's possible or even desirable but I did used to like the "switch" class available in Exp<ressionEngine.

Quick, dirty version: https://gist.github.com/4215822

First argument is 'key' so the function can globally remember its index, then how many arguments you like - those are strings that get looped.

Can be upgraded to do the string break up (so you'd pass something like "left|center|right"), and if you added autocreating the key (by sha1-ing the argument string), you could get to

<div class="<?=switch('left|right|center')?>">

But I'll leave that up to you

--

Of course, you can use this for the zebra table as well

 <tr class="<?=switch('zebra','odd','even')?>">

[Joss]

Wow, that cat got well and truly skinned!

Joss

[onjegolders]

Quick, dirty version: https://gist.github.com/4215822

First argument is 'key' so the function can globally remember its index, then how many arguments you like - those are strings that get looped.

Can be upgraded to do the string break up (so you'd pass something like "left|center|right"), and if you added autocreating the key (by sha1-ing the argument string), you could get to

<div class="<?=switch('left|right|center')?>">

But I'll leave that up to you

--

Of course, you can use this for the zebra table as well

<tr class="<?=switch('zebra','odd','even')?>">

Thanks Adam!

Any tips on how to implement this, I seem to be getting an error:

Parse error: syntax error, unexpected T_SWITCH, expecting T_STRING

But then I probably haven't understood how to use it

[ryan]

I think you might need to name the function something other than 'switch', as that's a reserved word in PHP.

http://php.net/manual/en/control-structures.switch.php

[Adam Kiss]

Ah, yeah, I didn't think of that. I think something like 'alternate' might be appropriate

[ryan]

Here's another way to do it:

function switcher($str) {
 static $mem = array();
 $items = explode('|', $str); 
 $n = isset($mem[$str]) ? $mem[$str]+1 : 0;
 if(!isset($items[$n])) $n = 0;
 $mem[$str] = $n;
 return $items[$n];
}

Usage:

<div class="<?=switcher('left|right|center')?>">

[onjegolders]

Ryan, that's fantastic, thanks!

Out of interest, where would you store that in a normal site? Just above output or in the header include. Suppose it depends?

[Martijn Geerts]

a basic approach I like:

files:

• global.inc ( here you could place your "global" function & variables )
  
• template-file.php ( include the global.inc on top & default.inc on the bottom )
  
• default.inc ( contains the site HTML & placeholder $variables like $meta_description, $headline, $content )
  

So in global.inc you could place your switcher function. I use the global.inc for:

1. putting scripts & styles everywhere needed in the config styles & scripts array.
   
2. setting default values creating empty Variables like: $content = ''; ( that way I know I can start in the template with $content .= 'some string data'; )
   
3. Some functions reusable functions.
   

template-file.php:

<?php
include (./includes/global.inc);
$headline .= "<h1>$page->get('headline|title')</h1>";
$content .= $page->body;
etc.
include (./includes/default.inc);

default.inc:

Almost static HTML file with the $headline, $content etc. variables

[ryan]

The method I often use is very similar to what Martijn posted. I'm thinking about adding a new $config variable where we can specify what files should be automatically included before a template is rendered. That way we don't even have to do remember to do an include("./global.inc"); The result would be kind of like an autoload module, but one wouldn't have to know how to make a module to benefit from it.

[diogo]

I'm thinking about adding a new $config variable where we can specify what files should be automatically included before a template is rendered

This would be great. It's something like the Wordpress "functions.php" http://codex.wordpress.org/Functions_File_Explained