Why this sample of code doesn’t work on IE7. Where is the problem? Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Test</title>
<script language="javascript" type="text/javascript">
function initialize()
{
for(var i=0; i < 10; i++)
{
var tab = document.getElementById("search").childNodes[0];
var line = document.createElement("tr");
var column = document.createElement("td");
column.appendChild(document.createTextNode("DATA"));
line.appendChild(column);
tab.appendChild(line);
}
}
</script>
</head>
<body onload="initialize()">
<div id="search" class="bulle"><table><tr><td></td><td align="right">X</td></tr><tr><td><table id="tableResult"><table></td><td></td></tr></table></div>
</body>
</html>
In IE you must add table rows to the tbody, not directly to the table. Also, in some browsers the first child of the div will be a text node if there is any whitespace between the DIV and TABLE tags in the markup. So either move the id to the table (or a tbody element), or use:
Note that all tables with rows will have a tbody element, even though the tags are optional in the markup (i.e. your markup doesn’t have a tbody element, but the table in the DOM will have one).
There is a tutorial on MDN about using the DOM table methods: https://developer.mozilla.org/en/Gecko_DOM_Reference/Examples#Example_8:_Using_the_DOM_Table_Interface.