当尝试通过innerHTML使用JavaScript动态添加表格元素时，不会在IE7，IE8和IE9中呈现

Question

I've been searching the interweb a bunch for this one and I'm stumped. The following Javascript works in Chrome, Firefox, and Safari, but for whatever reason it is not working in IE 7+. What I mean by 'not working' is that when trying to add table elements, nothing shows up in the browser / on the screen. I've used IE's built-in Developer tools, and nothing shows up on the de-bugger in the Console.

In a nutshell, all I'm trying to do is create table rows that have a checkbox in the first column, and plain text in the second column. Also, this entire method is being called after an AJAX event.

Here is the code:

tdObjs[0].innerHTML = '<input type="checkbox" name="page" value="' + pageID + '" 
onClick="fooFunction(\'' + pageID + '\', this,
 \'_images/foo/' + pageID + '.png\', \'' + pageID 
+ '\')" checked="yes">';

Where pageID is a variable passed to this function (in this exact example, its an int value of 5 ). tdObjs is defined by:

var tdObjs = trObj.getElementsByTagName('TD');

And trObj is passed into this function. trObj does show up in the local window of the IE Developer Tools as it is defined in another function like so:

var tableObj = $('##FooTable')[0];
var trObj = document.createElement('tr');
trObj.appendChild(document.createElement('td'));
for (var i=0;i<2;i++)
        trObj.appendChild(document.createElement('td'));
tableObj.appendChild(trObj);
return trObj;

Any ideas? Thank you in advance.

Answer 1

When adding rows to a table in IE, you must add them to the tbody, eg

<table id="foo">
  <tr>
    <td>cell 0
    <td>cell 1
</table>

In the above HTML, browsers will add a tbody element between the table and row elements. The tbody is mandatory but tags are optional. So to add rows you must do something like:

var table = document.getElementById('foo');
var tbody = table.tBodies[0];
var row = document.createElement('tr');
var cell = document.createElement('td');

// Give cell some content and add it
cell.appendChild(document.createTextNode('cell 0'));
row.appendChild(cell);

// Make another cell and add it
cell = cell.cloneNode(false);
cell.appendChild(document.createTextNode('cell 1'));
row.appendChild(cell);

tbody.appendChild(row);

It may be more efficient to clone a row and modify the cell contents rather than making new rows and cells. It's up to you.