...

View Full Version : Trouble with creating table dynamically in HTML



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum