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}">
<td>{row.somedata}</td>
...
</tr>
  
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') {
continue;
}
oRows = tables[t].rows;
var len = oRows.length;
for (i=1; i<oRows.length; i++) {
oRows[i].setAttribute("class",
(oRows[i].rowIndex % 2) ? 'row1' : 'row0');
}
}
}
// run it on load, or just call the function when you startup.
window.onload = hightlightTables

</script>
<tr flexy:foreach="rows,row" class="stripes">
<td>{row.somedata}</td>
...
</tr>


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

Comments

"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
Fix
It should be getElementsByTagName()
#2 - Alan Knowles ( Link) on 2005-02-08 12:13:12 Delete Comment

Add Your Comment

Follow us on