Question

Please check this example: http://jsfiddle.net/lulu2792/a9LZd/

I use innerHTML to set a table row content (including cell contents), I run well on Firefox & Chrome. However, It has a bug on IE7 (also on IE9 Compatibility Mode). The table HTML result is:

<TABLE id=table1>
 <TBODY>
  <TR>
   <TD>
    Test
   </TD>
  </TR>
  <TR>
   ABC
   </TD>
  </TR>
 </TBODY>
</TABLE>

Please focus on the 2nd row, it has a bug. I don’t understand why innerHTML cause this bug on IE7. How to correct this problem?

And I also have a question: if I don’t use tbody tag inside a table element like this:

var html = "<table id='table1'><tr><td>Test</td></tr></table>";

browser still renders this tag.

Please help me to answer two above questions.

Answer 1

You can’t use the innerHTML property to write parts of a table in IE, you must use DOM methods. innerHTML can be used to write an entire table, or the contents of a cell.

There is an example on MSDN: Building Tables Dynamically.

There is also an example on MDN: Using the DOM Table Interface

In the code you posted elsewhere (much better to post it here):

// create table
var html = "<table id='table1'><tbody><tr><td>Test</td></tr></tbody></table>";
document.getElementById('div1').innerHTML = html;

That works fine because it creates an entire table.

// append a row into table
var tr = document.createElement('tr');
var td = document.createElement('td');
td.innerHTML = 'ABC';
tr.appendChild(td);
var s = tr.innerHTML;

The above works fine in all browsers.

tr.innerHTML = s;

Ooops, can only assign to the innerHTML of a cell (td or th), not any other part of a table.

tr.innerHTML = '<td>' + 'ABC' + '</td>';

Same again.

var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];

You can use the tBodies property to simplify that:

var tbody = document.getElementById('table1').tBodies[0];
tbody.appendChild(tr);

That would work fine if you hadn’t messed with the innerHTML of the tr.

Note that you could also do:

var tbody = document.getElementById('table1').tBodies[0];
var row = tbody.insertRow(-1);
var cell = row.insertCell(-1);
cell.innerHTML = 'whatever';

And you’re done. You can also clone an entire row then modify the cell contents with innerHTML.