innerHTML is read only in IE on table structures. You should use insertRow() and insertCell() to create tables, these work in IE and Firefox. Be careful to add the row or cell index as Firefox will error otherwise. Here's a fragment of code I wrote recently to create a table where the user adds or deletes rows:
Code:
function addBookRow()
{
var oContainer = getBooksContainer();
var oRow = oContainer.insertRow(oContainer.rows.length);
var oCell = oRow.insertCell(0);
oCell.appendChild(getNewTextbox(13, 13));
oCell = oRow.insertCell(1);
oCell.appendChild(getNewTextbox(13, 13));
oCell = oRow.insertCell(2);
var oButton = getNewButton("Remove Book");
oButton.onclick = function(){deleteBookRow(this);};
oCell.appendChild(oButton);
oCell = oRow.insertCell(3);
}
function getBooksContainer()
{
return document.getElementById("tbBooks");
}
function getNewTextbox(size, maxLength)
{
var oInput = document.createElement("input");
oInput.type = "text";
oInput.size = size;
oInput.maxLength = maxLength;
return oInput;
}
function getNewButton(value)
{
var oInput = document.createElement("input");
oInput.type = "button";
oInput.value = value;
return oInput;
}
function deleteBookRow(sender)
{
var oRow = sender.parentNode.parentNode;
oRow.parentNode.parentNode.deleteRow(oRow.rowIndex);
}
<table><caption>Add a Book</caption>
<thead><tr><th>ISBN</th><th>Pass Code</th>
<th>
<input type="button" value="Add Another Book" onclick="addBookRow();" /></th><th> </th></tr></thead>
<tbody id="tbBooks"><tr class="data"><td><input type="text" size="13" maxlength="13" /></td><td><input type="text" size="13" maxlength="13" /></td><td><input type="button" value="Remove Book" onclick="deleteBookRow(this);" /></td><td><span></span></td></tr></tbody>
</table>
--
Joe (
Microsoft MVP - XML)
Referencing new node in IE
