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

Question

I have several nested tables that I want to hide / show when I click on one of the top-level rows.

The markup in a nutshell:

  <table>
     <tr>
       <td> stuff </td>
       .... more tds here
     </tr>
     <tr>
       <td colspan = some_number>
         <table>
         </table>
       </td>
     </tr>
   </table>

Now I use jQuery to target the links in the first row of the table. When this link is clicked, it pulls some data down, formats it as a bunch of table rows, and adds it to the table inside. Then it applies .show () to the table. (All this is done using id / class targeting. I left them from the example for brevity).

This works great in firefox. Click the link, the data will be downloaded, the main table will expand, and the second table will be filled and added.

Problem - Internet Explorer gives me a finger. As far as I can tell, the data is being added to the internal table. The problem is that .show () doesn't seem to be doing anything useful. To make matters worse, I have a page with this functionality that works great in both - the only difference is two things:

In the one that works, the inner table is wrapped in a div. I even tried wrapping the table in this example in a div without success. In what does not work, I have downloaded an additional jQuery plugin, but I uninstalled this plugin and tried the page without it, and it still could not display the internal table.

I tried connecting .show to the parent tr, parent td and the table itself without any success. I need to skip something incredibly simple because, as far as I can tell, this should work.

Has anyone come across anything like this before?

Answer 1

Keep in mind that the innerHTML table <table> element is read-only in IE (6 for sure, not sure about 7). In this case, are you explicitly adding the <tbody> element? If not, try adding one and adding rows to the body element, not the table element.

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

Information about Microsoft (sort) about it: PRB: Error installing table.innerHTML in Internet Explorer Note: it says that it is "by design".

Answer 2

In IE, there are many errors associated with changing the contents of tables from Javascript. In many cases, IE (including IE7) even crashes.

I have come across this recently, and I am thinking about what I came up with. Let me go back through my magazines and see what I can find.

---

OK, I found a case that I encountered.

I did something like that. I had a table, and I tried to add a <td > tag with a link in it using Javascript, and this caused a memory exception in IE7.

After all, the only way I could figure it out was to rebuild the entire <table > in Javascript, rather than trying to insert things into an existing one.

To clarify, rebuild, I want to create a row containing an HTML table and add it to the innerHTML div. I do not use DOM functions to create a table.