I have some nested tables that I want to hide/show upon a click on one of the top-level rows.
The markup is, in a nutshell, this:
<table> <tr> <td>stuff</td> .... more tds here </tr> <tr> <td colspan=some_number> <table> </table> </td> </tr> </table>
Now, I’m using some jQuery to target a link in the first table row. When that link is clicked, it pulls some data down, formats it as a bunch of table rows, and appends it to the table inside. Then it applies the .show() to the table. (this is all done via id/class targeting. I left them out of the sample for brevity).
This works beautifully in firefox. Click the link, data gets loaded, main table ‘expands’ with the secondary table all nice and filled in.
Problem is — Internet Explorer is giving me the finger. As best as I can tell, the data is getting appended to the inner table. The problem is that the .show() does not appear to be doing anything useful. To make matters more annoying, I’ve got a page that has this functionality that is working splendidly in both — the only difference being two things:
In the one that is working, the inner table is wrapped in a div. I’ve even tried wrapping my table in this example in a div without success. In the one that is not working, I have an extra jQuery plugin loaded — but I’ve removed this plugin and tried the page without it and it still fails to show the inner table.
I’ve tried attaching the .show to the parent tr, parent td, and the table itself with no success. I must be missing something incredibly simple, because as near as I can tell this should work.
Has anyone come across something like this before?
Keep in mind that the innerHTML of a <table> element is read-only in IE(6 for sure, not sure about 7). That being the case, are you explicitly adding a <tbody> element? If not, try adding one and adding the rows to the body element rather than the table element.
Microsoft info (sort-of) about this: PRB: Error Setting table.innerHTML in Internet Explorer Note: it says this is ‘by design’.