Site Navigation

Thursday, November 15, 2007

bug 171 - dynamic table DOM gotcha in IE

Issue: #171
Affects: IE6, IE7, IE8

When HTML first came out, the HTML Table was a simple element consisting of a <table> tag, with n <tr> tags, each with n <th> or <td> tags in it.

The specification grew, to include a tag called <tbody> (among others) to help group sets of rows within a table.

Browsers allowed for both implementations, either with the optional tbody section or not.

However Internet Explorer did something strange... they actually started to follow the spec (even though they miss the mark almost everywhere else).

In IE using the DOM, if you try to add <tr> elements to a <table> using the .appendChild() method, you MUST add a <tbody> section first. IE will not throw any errors if you do not, but it will also not render any rows/cells in your table either.

Known Workarounds: One. Always add the tbody section, and be sure to expect it when navigating this table in the DOM later on.

Related Issues: None.