The code below works in Google Chrome but doesn't work in IE8. It gives all the alerts in IE8 but doesn't render the table. Can anyone please help?
<html>
<head>
<title>Routing</title>
<script>
var table;
var row;
var col1;
var col2;
var i, j, k;
function getData()
{
document.body.style.zoom = "75%";
table = document.getElementById("mainTable");
for(k=0; k<3; k++)
{
alert("1");
row = document.createElement('tr');
if(k%2!==0)
{
alert("2");
str="<td colspan=\"10\"><img src=\"arrow.png\" alt=\"Down Left Arrow\" height=\"42\" width=\"100%\"></td>"
row.innerHTML=str;
}
else
{
alert("4");
for(x = 0; x<10; x+=2)
{
col1 = row.appendChild(document.createElement('td'));
col2 = row.appendChild(document.createElement('td'));
//Column x
str="<table border=\"0\" rules=rows width=\"99%\">";
for(y=0; y<5; y++)
{
str+="<tr><td style=\"background-color : green; color:white; font: 1.0em arial, sans-serif;\" align=\"center\" width=\"80%\">abcd</td></tr>";
}
str+="<tr>" + "<td width=\"99%\" height=\"99%\" align=\"center\">" +
"<img src=\"ArrowRight.png\" alt=\"Right Arrow\" height=\"42\" width=\"80%\"></td>" +
"</tr></table>";
col1.innerHTML=str;
//Column x+1
str="<table border=\"0\" rules=rows width=\"100%\" style=\"border : 2px solid black\">";
for(z=0; z<1; z++)
{
str+="<tr><td style=\"background-color : blue; color:white; font: 1.0em arial, sans-serif;\" align=\"center\" width=\"99%\" height=\"99%\" >abcd</td></tr>";
}
str+="<tr><td style=\"background-color : red; color:white; font: 1.5em arial, sans-serif;\" align=\"center\">" + "Data1" + "</td></tr>" +
"<tr><td style=\"background-color : red; color:white; font: 1.5em arial, sans-serif;\" align=\"center\">" + "Data2" + "</td></tr>" +
"<tr><td style=\"background-color : red; color:white; font: 1.5em arial, sans-serif;\" align=\"center\">" + "Data3" + "</td></tr></table>";
col2.innerHTML=str;
}
}
alert("6");
table.appendChild(row);
alert("7");
}
}
</script>
</head>
<body onload="getData();">
<table id="mainTable" width="100%" cellspacing="5" cellpadding="10" style="background-color : #DCDCDC; border : 2px solid black">
</body>
</html>
Try running it with both the browsers and let me know what mistake I am making. Thanks
AFAIK
innerHTMLis not supported in Internet Explorer 8 and previous versions, you want to use appendChild and createElement instead.So for example, instead of
row.innerHTML=str;you could userow.appendChild(str);.Some function reference: http://www.w3schools.com/jsref/met_node_appendchild.asp