Menu
Hi,
The following code for dynamic table creation is not working.
Can anyone please help me.
The dynamically created rows and columns are not getting populated.
<html>
<head>
<title>Sample code – Traversing an HTML Table with JavaScript and DOM Interfaces</title>
<script>
function startLoad() {
var tbl = document.getElementById(“tbl”);
var tblBody = document.getElementById(“tblBody”);
var newTblBody = document.createElement(“newTblBody”);
newTblBody.id = “tblBody”;
for (var j = 0; j < 2; j++) {
// creates a table row
var row = document.createElement(“tr”);
for (var i = 0; i < 2; i++) {
// Create a <td> element and a text node, make the text
// node the contents of the <td>, and put the <td> at
// the end of the table row
var cell = document.createElement(“td”);
var cellText = document.createTextNode(“cell is row ” + j + “, column ” + i);
cell.appendChild(cellText);
row.appendChild(cell);
}
// add the row to the end of the table body
newTblBody.appendChild(row);
}
// put the <tbody> in the <table>
tbl.replaceChild(newTblBody, tblBody);
// sets the border attribute of tbl to 2;
tbl.setAttribute(“border”, “2”);
}
</script>
</head>
<body onload=”startLoad()”>
<table id=”tbl” border=”1″ width=”100%” cellspacing=”0″>
<thead>
<tr>
<td class=”header”>Col 1</td>
<td class=”header”>Col 2</td>
</tr>
</thead>
<tbody id=”tblBody”>
</tbody>
</table>
</body>
</html>
===========================