2
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.
CODE:
=========
[HTML]<html>
<head>
<title>Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces</title>
<script>
[/HTML]
Expand|Select|Wrap|Line Numbers
- 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");
- }
</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>[/HTML]
===========================
