Here's a PHP example of mine. Can anyone find a shorter/easier way to do this?
<? foreach($posts as $post){?>
<div class="<?=($c++%2==1)?‘odd’:NULL?>">
<?=$post?>
</div>
<? }?>
<style>
.odd{background-color:red;}
</style>
Examples in other languages would be fun to see as well.
Fundamentally - no. That's about as easy as it gets. You might rewrite it a bit shorter/cleaner, but the idea will be the same. This is how I would write it:
$c = true; // Let's not forget to initialize our variables, shall we?
foreach($posts as $post)
echo '<div'.(($c = !$c)?' class="odd"':'').">$post</div>";
Maybe a function with a static variable?
<?php
function alternate_row_color($css_class) {
static $show = true;
$show = !$show;
if ($show) {
return $css_class;
} else {
return NULL;
}
}
?>
Then to use it (using your example):
<?php foreach($posts as $post) { ?>
<div class="<?=alternate_row_color('odd')?>">
<?=$post?>
</div>
<?php } ?>
It's short enough as it is, but I would probably wrap it into some helper function with a clear name. That way it's more obvious what's going on and you won't have to repeat that logic in all templates where you need it.
<?php $alt = true; foreach ($posts as $post): $alt = !$alt; ?>
<div<?php echo $alt ? ' class="odd"' : ''; ?>>
<!-- Content -->
</div>
<?php endforeach ?>
Would be the simplest and clearest way to do it.
Smarty has it inbuilt:
{section name=rows loop=$data}
<tr class="{cycle values="odd,even"}">
<td>{$data[rows]}</td>
</tr>
{/section}
So does Django:
{% for o in some_list %}
<tr class="{% cycle 'row1' 'row2' %}">
...
</tr>
{% endfor %}
Using CSS3 you can do something like this:
div:nth-child(odd)
{
background-color: red
}
But better not use that for a few years if you actually want your users to see the color...
If you want to do it on the display end and are comfortable with or otherwise already using javascript, libraries like jQuery will often have :odd and :even selectors, which you can then hook up to adding specific style properties or hooking into CSS more generally by adding classes.
If you'd like to have less in-line PHP, a great way of doing it is via JavaScript.
In jQuery, it's simply:
<script type="text/javascript">
$('div:odd').css('background-color', 'red');
</script>
Just for fun
Assuming you can use CSS3 selectors you can do something like
<div class="posts">
<? foreach($posts as $post){?>
<div>
<?=$post?>
</div>
<? }?>
</div>
<style>
div.posts div:odd{background-color:red;}
</style>
Even with CSS2 support and mootools (javascript library) you can substitute the style with this javascript
<script type="text/javascript">
// obviously this script line should go in a js file in a onload (or onDomReady) function
$$('div.posts div:odd').setStyle('background-color','red');
</script>
If you don't have anything but php a it you can simplify a bit yous code using an array
<? $isodd=array('','odd');
$c=0;
foreach($posts as $post){?>
<div class="<?=$isodd[$c++%2]?>">
<?=$post?>
</div>
<? }?>
You can encapsulate the logic as follows:
<?php
class ListCycler {
private $cols, $offs, $len;
// expects two or more string parameters
public function __construct() {
$this->offs = -1;
$this->len = func_num_args();
$this->cols = func_get_args();
foreach($this->cols as &$c)
$c = trim(strval($c));
}
// the object auto-increments every time it is read
public function __toString() {
$this->offs = ($this->offs+1) % $this->len;
return $this->cols[ $this->offs ];
}
}
?>
<html>
<head>
<style>
ul#posts li.odd { background-color:red; }
ul#posts li.even { background-color:white; }
</style>
</head>
<body>
<div>
<h3>Posts:</h3>
<ul id="posts"><?php
$rc = new ListCycler('odd','even');
foreach($posts as $p)
echo "<li class='$rc'>$p</li>";
?></ul>
</div>
</body>
</html>
Don't forget! If you use a Javascript solution (jquery, prototype or anything else) you will have a small flick when page loads. In fact, until the page is fully loaded, you won't have the "Zebra" on your rows. For some people this might be a problem.
On a side noe, to alternate between two values a and b, a nice way of doing it in a loop is this:
x = a;
while ( true ) {
x = a + b - x;
}
You can also do this without addition and subtraction:
x = a ^ b ^ x;
where ^ is the XOR operation.
If you just want to alternate between 0 and 1, you can do this:
x = 0;
while ( true ) {
x = !x;
}
You could of course use x as an index of colors, CSS style classes and so on.
i always name my zebra rows "row0" and "row1" - this makes the code a bit simpler.
<?php // you should always use the full opening tag for compatibility
$i = 0;
foreach ($rows as $row) {
echo '<tr class="row' . ($i++ % 2) . '">...</tr>';
}
?>
DEFINITIVE ANSWER:
// THE FUNCTION
function row_color($cnt,$even,$odd) {
echo ($cnt%2) ? "<tr bgcolor=\"$odd\">" : "<tr bgcolor=\"$even\">";
}
// HOW TO USE IT
$cnt=0;
while ($row = mysql_fetch_array ($result)) {
row_color($cnt++,"e0e0e0","FFFFFF");
}