Trouble with creating table dynamically in HTML [Archive]

vishnusanjit

12-08-2009, 01:58 PM

Hi All,

I'm trying to create a table on the page upon receiving an event from the user.
It works alright in Firefox but not in IE. There's no error message either in IE. Could someone shed some light on this? Here's the code:

<html>
<head>
<script type='text/javascript'>

function makeTable()
{

var nTable=document.createElement('table');
nTable.setAttribute('id','myTable');
nTable.setAttribute('border','1');

var nRow1=document.createElement('tr');
var nData11=document.createElement('td');
nData11.setAttribute('colspan','2');
var nCenter11=document.createElement('center');
var nBold=document.createElement('b');
nBold.appendChild(document.createTextNode('Title'));
nCenter11.appendChild(nBold);
nData11.appendChild(nCenter11);
nRow1.appendChild(nData11);

var nRow2=document.createElement('tr');
var nData21=document.createElement('td');
var nCenter21=document.createElement('center');
nCenter21.appendChild(document.createTextNode('21'));
nData21.appendChild(nCenter21);
var nData22=document.createElement('td');
var nCenter22=document.createElement('center');
nCenter22.appendChild(document.createTextNode('22'));
nData22.appendChild(nCenter22);
nRow2.appendChild(nData21);
nRow2.appendChild(nData22);

nTable.appendChild(nRow1);
nTable.appendChild(nRow2);

alert('Almost there !');
try
{
document.getElementById('container').appendChild(nTable);
}
catch (e)
{
alert(e.message);
}

return;

}

</script>
</head>

<body>
<div id='container'>
</div>
<br>
<input type=button value='Go' onclick='makeTable();'>
</body>
</html>

coothead

12-08-2009, 02:55 PM

Hi there vishnusanjit,

and a warm welcome to these forums. ;)

Try it like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
#myTable {
border:2px solid #999;
margin:10px auto;
}
#myTable th {
border:1px solid #333;
}
#myTable td {
width:100px;
border:1px solid #333;
text-align:center;
}
</style>

<script type="text/javascript">

function makeTable(){

document.getElementById('myButton').onclick=function() {

nTable=document.createElement('table');
nTable.setAttribute('id','myTable');

nBody=document.createElement('tbody');

nRow1=document.createElement('tr');

nData11=document.createElement('th');
nData11.colSpan=2;
nData11.appendChild(document.createTextNode('Title'));

nRow1.appendChild(nData11);

nRow2=document.createElement('tr');

nData21=document.createElement('td');
nData21.appendChild(document.createTextNode('21'));

nData22=document.createElement('td');
nData22.appendChild(document.createTextNode('22'));

nRow2.appendChild(nData21);
nRow2.appendChild(nData22);

nBody.appendChild(nRow1);
nBody.appendChild(nRow2);

nTable.appendChild(nBody);

document.getElementById('container').appendChild(nTable);
}
}
if(window.addEventListener){
window.addEventListener('load',makeTable,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',makeTable);
}
}

</script>

</head>
<body>

<div id='container'>

<input id="myButton" type="button" value="Go">

</div>

</body>
</html>

coothead