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.
When adding rows to a table in IE, you must add them to the tbody, e.g.
<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.