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 (444 referals)
google.com : javascript getElementsByType (361 referals)
google.com : getelementsbytype javascript (194 referals)
google.com : document.getElementsByType (188 referals)
google.com : december (66 referals)
google.com : javascript document.getElementsByType (64 referals)
google.com : april (61 referals)
google.com : getElementsByType in javascript (29 referals)
google.com : javascript clone table row (22 referals)
google.com : document.getElementsByType javascript (21 referals)
google.com : flexy foreach (19 referals)
google.com : javascript table (19 referals)
google.com : document getelementsbytype (16 referals)
blog.akbkhome.com : AKBK home - Smoking toooooo much PHP - Seperating Display and Data - Javascript table highlighting (16 referals)
google.com : javascript document getelementsbytype (14 referals)
google.com : (13 referals)
google.com : javascript table length (13 referals)
google.com : getElementsByType javascript (11 referals)
google.com : Highlight Table Rows php (9 referals)
google.com : document.getelementsbytype in javascript (9 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

Contact


Email: sales@roojs.com
Tel: +852 3709 2951
Room 2710, Trend Center
29-31 Cheung Lee Street,
Chai Wan
Hong Kong

Copyright 2023 - Roo J Solutions Limited

Powered by the Roo Javascript Library and our Roo bootstrap toolkit