Jump to content

Alternating row colour in a table


antknight
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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...

  • Like 3
Link to comment
Share on other sites

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>";
		   }
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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')?>">
  • Like 2
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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')?>">
  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...