Published 2004-09-07 21:36:14

Sometimes, it's those little problems that have annoyed you for years, and you never bothered looking at how to solve them. Today it was alternating highlights on a table.

A horrifically simple problem, rendering a table of data, and to make it easier to read, you alternate the rows with a light grey background. I did a whole application, that was heavily focused on displaying data like this, and came back this week to add an extra page.

The old code did a standard DataObject/Flexy Template trick:
$hightlight = 0;
while ($do->fetch()) {
$r = clone($do);
$r->highlight = "row" . ((int) $highlight);
$hightlight = !$highlight;
$this->rows[] = $r;

and in the template:

<tr flexy:foreach="rows,row" class="{row.highlight}">
Ok, that wasnt too bad, but somehow the messing around in PHP each time, just to do the highlighting felt kind of messy.., I had looked at this again recently for another project, and discovered there is a way to do it using CSS2 (but IE doesnt support it.. - what a supprise). I had also seen another suggestion, adding a behaviour to the style for the table, this seemed reasonable, however, when I'm prototyping, I like to keep things together, so it was a bit annoying to have this loose bit of javascript hanging around in a file on it's own.

So today I got a bit closer to an ideal solution.

while ($do->fetch()) {
$this->rows[] = clone($do);
And in the template:

<script type="text/javascript">

function highlightTables()
var tables=document.getElementsByType('table');
for (var t = 0; t < tables.length; t++) {
if (tables[t].getAttribute('class') != 'stripes') {
oRows = tables[t].rows;
var len = oRows.length;
for (i=1; i<oRows.length; i++) {
(oRows[i].rowIndex % 2) ? 'row1' : 'row0');
// run it on load, or just call the function when you startup.
window.onload = hightlightTables

<tr flexy:foreach="rows,row" class="stripes">

Mentioned By: : getElementsByType ( referals) : javascript getElementsByType ( referals) : getelementsbytype javascript ( referals) : document.getElementsByType ( referals) : december ( referals) : javascript document.getElementsByType ( referals) : april ( referals) : getElementsByType in javascript ( referals) : javascript clone table row ( referals) : document.getElementsByType javascript ( referals) : flexy foreach ( referals) : javascript table ( referals) : document getelementsbytype ( referals) : AKBK home - Smoking toooooo much PHP - Seperating Display and Data - Javascript table highlighting ( referals) : javascript document getelementsbytype ( referals) : ( referals) : javascript table length ( referals) : getElementsByType javascript ( referals) : Highlight Table Rows php ( referals) : document.getelementsbytype in javascript ( referals)


"there is a way to do it using CSS2"

That would be CSS3, actually
#0 - Anonymous ( Link) on 2004-09-07 22:42:44 Delete Comment
There's (of course) another nice way.

As one's usually using some kind of controller or widget objects with flexy one can declare a
method like that:

function oddEven($i)
return $i % 2 ? 'odd' : 'even';

And the corresponding template snippet would look like:

<tr flexy:foreach="rows,i,row" class="{oddEven(i):h}">

#1 - Mike ( Link) on 2004-09-07 23:29:05 Delete Comment
It should be getElementsByTagName()
#2 - Alan Knowles ( Link) on 2005-02-08 12:13:12 Delete Comment

Add Your Comment

Follow us on