1222
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:
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
Previous Topic
