I have put this sample together so other programmers don’t run into the pitfalls I have.
Problem:
IE supports innerHTML for table cells and FireFox doesn’t.
Solution:
You have to embed a div within the table cell and perform all innerHTML calls on that. IE and FireFox both support this method.
Sample code below:
<html>
<head></head>
<body>
<script language=”JavaScript”>
<!–
/* This works for both IE and Firefox */
function toggleValue()
{
if(document.getElementById(”currentItem”).innerHTML != “1″)
{
document.getElementById(”currentItem”).innerHTML = “1″;
}else
{
document.getElementById(”currentItem”).innerHTML = “2″;
}
}
//–>
</script>
<table width =” 200″ border=”0″>
<tr>
<td colspan=2><br><center>
<a href=”javascript:toggleValue()”>Toggle Value</a>
</center></td>
</tr>
<tr>
<td>
<strong>Value:</strong>
</td><td>
<div id=”currentItem”>1</div>
</td>
</tr>
</table>
</body>
</html>
FireFox or IE Gotcha:
FireFox does not support table tags when changing the value of a div using innerHTML()- when the div is within a table cell. Form tags along with most other tags are supported
*IE does support table tags when changing the value of a div using innerHTML() when the div is within a table cell.
I am not really sure who is right and who is wrong with the Gotcha…