Javascript-generated tables and rowspan

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):

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');
}

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

Cross-browser div focus and blur

Internet Explorer has for some time supported giving ‘focus’ to non-focussable elements such as divs. Firefox, by contrast, does not. Whilst this makes sense semantically, it’s often still very useful to use these triggers. For example, you can use onfocus to show a popup when a div is clicked, and close the popup when anything else is clicked on the page (in the onblur event).

There are many, many workarounds which provide this functionality, using such tricks as hidden input elements, global onclick handlers, and so on, but the simplest is simply this: give your div a tabIndex attribute. For example,

<div tabindex="-1" onfocus="document.getElementById('monkey').style.display='block'" onblur="document.getElementById('monkey').style.display='none'">Click to show another div.</div>
<div id="monkey" style="display:none;">Click elsewhere to hide this div.</div>

works perfectly in Firefox, Internet Explorer, and Chrome as shown in the example below:

Click to show another div.

You can also achieve a similar effect purely with CSS:

<style>
#focus-example > .extra { display: none; }
#focus-example:focus > .extra { display: block; }</style>
<div id="focus-example" tabindex="0">
  <div>Focus me!</div>
  <div class="extra">Hooray!</div>
</div>
Focus me!
Hooray!

Because the second example shows or hides a child element, the parent element will remain focussed if the user interacts with the child element, or its children. This allows you to embed links, forms, videos, and so on in the child element.

The value of tabIndex can have significance, too:

  • -1: The user can’t tab to the element, but it can be given focus programmatically (element.focus()) or by being clicked on.
  • 0: The user can tab to the element, and its order in the tabbing is automatically determined.
  • >0: Give the element a priority, with ‘1’ being the highest priority.

I originally discovered this technique on this CodingForums.com thread.