At work, I’ve recently been putting together a nice little calendar-like utility using Javascript. Basically, it has to generate a table consisting of cells which may span multiple rows. Surely the solution is simple enough: just set the rowspan on each td as we create it. Unfortunately, that doesn’t work, at least not in Firefox.
It appears that in Firefox, if you create a td and set its rowspan to some value when there are no rows for it to expand into, the attribute will be completely ignored, even if you add rows afterwards! Needless to say, this is very annoying. The solution? Build your table backwards.
The code I have now is something like this (note that I’m developing using the Mootools framework):
[sourcecode language=’javascript’]var tbl = new Element(‘table’);
var trs = [];
for (var i = 0; i < 4; i++) {
var tr = new Element('tr');
tr.grab(new Element('td', {
'html': 'Cell ' + i
}));
if (i % 2 == 0) {
tr.grab(new Element('td', {
'rowspan': 2,
'html': 'Span ' + (i / 2)
}));
}
trs.push(tr);
}for (var i = trs.length - 1; i >= 0; i–) {
tbl.grab(trs[i], ‘top’);
}[/sourcecode]
What does this code do? Well basically, we’re creating a table with ten rows and two columns; the cells in the right-hand column each occupy two rows. The result will be something like this:
| Cell 1 | Span 1 |
| Cell 2 | |
| Cell 3 | Span 2 |
| Cell 4 |