Seperating Display and Data - Javascript table highlighting
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:
and in the template:
So today I got a bit closer to an ideal solution.
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()) {And in the template:
$this->rows[] = clone($do);
}
<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)
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)
Follow us
-
- Roo Builder for Gtk4 moving forward
- Clustered Web Applications - Mysql and File replication
- GitLive - Branching - Merging
- PDO_DataObject Released
- PDO_DataObject is under way
- Mass email Marketing and anti-spam - some of the how-to..
- Hydra - Recruitment done right
- More on syntax checking vala - and a nice video
Blog Latest
-
Twitter - @Roojs