Dynamic creation of table with DOM

Question

Can someone tell me what's wrong with this code? I want to create a table with 2 columns and 3 rows, and in the cells I want Text1 and Text2 on every row. This code creates a table with 2 columns and 3 rows, but it's only text in the cells in the third row (the others are empty).

var tablearea = document.getElementById('tablearea');  var table = document.createElement('table');  var tr = [];  var td1 = document.createElement('td'); var td2 = document.createElement('td');  var text1 = document.createTextNode('Text1'); var text2 = document.createTextNode('Text2');  for (var i = 1; i < 4; i++){     tr[i] = document.createElement('tr');        for (var j = 1; j < 4; j++){         td1.appendChild(text1);         td2.appendChild(text2);         tr[i].appendChild(td1);         tr[i].appendChild(td2);     }                table.appendChild(tr[i]);  }  tablearea.appendChild(table); 

Answer 1

You must create td and text nodes within loop. Your code creates only 2 td, so only 2 are visible. Example:

var table = document.createElement('table'); for (var i = 1; i < 4; i++){     var tr = document.createElement('tr');         var td1 = document.createElement('td');     var td2 = document.createElement('td');      var text1 = document.createTextNode('Text1');     var text2 = document.createTextNode('Text2');      td1.appendChild(text1);     td2.appendChild(text2);     tr.appendChild(td1);     tr.appendChild(td2);      table.appendChild(tr); } document.body.appendChild(table); 

Answer 2

It is because you're only creating two td elements and 2 text nodes.

---

Creating all nodes in a loop

Recreate the nodes inside your loop:

var tablearea = document.getElementById('tablearea'),     table = document.createElement('table');  for (var i = 1; i < 4; i++) {     var tr = document.createElement('tr');      tr.appendChild( document.createElement('td') );     tr.appendChild( document.createElement('td') );      tr.cells[0].appendChild( document.createTextNode('Text1') )     tr.cells[1].appendChild( document.createTextNode('Text2') );      table.appendChild(tr); }  tablearea.appendChild(table); 

---

Creating then cloning in a loop

Create them beforehand, and clone them inside the loop:

var tablearea = document.getElementById('tablearea'),     table = document.createElement('table'),     tr = document.createElement('tr');  tr.appendChild( document.createElement('td') ); tr.appendChild( document.createElement('td') );  tr.cells[0].appendChild( document.createTextNode('Text1') ) tr.cells[1].appendChild( document.createTextNode('Text2') );  for (var i = 1; i < 4; i++) {     table.appendChild(tr.cloneNode( true )); }  tablearea.appendChild(table); 

---

Table factory with text string

Make a table factory:

function populateTable(table, rows, cells, content) {     if (!table) table = document.createElement('table');     for (var i = 0; i < rows; ++i) {         var row = document.createElement('tr');         for (var j = 0; j < cells; ++j) {             row.appendChild(document.createElement('td'));             row.cells[j].appendChild(document.createTextNode(content + (j + 1)));         }         table.appendChild(row);     }     return table; } 

And use it like this:

document.getElementById('tablearea')         .appendChild( populateTable(null, 3, 2, "Text") ); 

---

Table factory with text string or callback

The factory could easily be modified to accept a function as well for the fourth argument in order to populate the content of each cell in a more dynamic manner.

function populateTable(table, rows, cells, content) {     var is_func = (typeof content === 'function');     if (!table) table = document.createElement('table');     for (var i = 0; i < rows; ++i) {         var row = document.createElement('tr');         for (var j = 0; j < cells; ++j) {             row.appendChild(document.createElement('td'));             var text = !is_func ? (content + '') : content(table, i, j);             row.cells[j].appendChild(document.createTextNode(text));         }         table.appendChild(row);     }     return table; } 

Used like this:

document.getElementById('tablearea')         .appendChild(populateTable(null, 3, 2, function(t, r, c) {                         return ' row: ' + r + ', cell: ' + c;                      })         );