2

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Leo Vo
  • 9,980
  • 9
  • 56
  • 78
  • your code doesn't make sense. `var s = tr.innerHTML; tr.innerHTML = s`. set the inner html to something, set the tr to itself, then destroy all that and stuff in a fixed string? – Marc B Sep 27 '12 at 03:27
  • I give this context so that you see this problem easily. First, tr.innerHTML is valid HTML -> I assign it to variable 's'. After I reassign 's' to tr.innerHTML without any changes. Clearly, tr.innerHTML has changes. I don't know why. – Leo Vo Sep 27 '12 at 03:33

2 Answers2

8

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.

RobG
  • 142,382
  • 31
  • 172
  • 209
2

Internet Explorer has notorious issues with appending HTML to a table. The best solution is to use a 3rd party library which normalizes behavior across browsers (such as jQuery, but there are others).

jQuery example:

// invokes a function when document is ready
// dollar symbol is "jQuery" alias inside function
jQuery(function($) {
    // select the table body and append a new row
    $('#table1 tbody').append('<tr><td>ABC</td></tr>');
});

Hey also, that second row is missing the <td> start tag.

Your second question: a tbody is not required (I believe XHTML requires it if you have a thead and a tfoot).

Joe Coder
  • 4,498
  • 31
  • 41
  • Please check this: http://jsfiddle.net/lulu2792/qYFTy/ You try run it on any browsers. tbody tag is always created inside table element. – Leo Vo Sep 27 '12 at 03:36
  • That's normal. See [this answer](http://stackoverflow.com/a/1681427/159570) for more info. I'm just talking about the source HTML. – Joe Coder Sep 27 '12 at 03:42
  • Note that a `tbody` element is mandatory in a table, however the tags are optional. – RobG Sep 27 '12 at 03:53
  • Yes. The crux of the confusion is that the browser will fix your "quirks" and insert the tags for you, which is why the source HTML can differ from the effective HTML. – Joe Coder Sep 27 '12 at 03:59