.hide(), .show(), tables, and IE

Question

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?

Answer 1

There are a bunch of bugs in IE related to modifying the contents of tables from Javascript. In a lot of cases, IE (including IE7) will even crash.

I ran into this recently and I'm blanking on the work-around I came up with. Let me go back through my logs and see what I can find.

---

OK, I found the case I ran into.

I was doing something similar. I had a table and I was trying to add a <td> tag with a link in it via Javascript and that was causing a memory exception in IE7.

In the end, the only way I could figure out to get around it was to rebuild the entire <table> in Javascript rather than trying to insert things into the existing one.

To clarify, by rebuild I mean create a string containg the table HTML and add it to the innerHTML of a div. I'm not using DOM functions to create the table.

Answer 2

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.

<table>
  <tbody>
    <!-- Add stuff here... -->
  </tbody>
</table>

Microsoft info (sort-of) about this: PRB: Error Setting table.innerHTML in Internet Explorer Note: it says this is "by design".