I have tried to run a Javascript loop to create a table with values in it from an array: I appended the text-node and tried that the text node will be the array values, one per td for the length. This is my code so far, it will only create one cell with "undefined" value:

function addtd(){
      var table1 = document.getElementsByTagName('table')[0];
      var rowrow =  document.createElement('tr');
      var foods = new Array();

      foods[0] = "milk" ;`enter code here`
      foods[1] = "meat" ;
      foods[2] = "fruit" ;
      foods[3] = "fish" ;
      foods[4] = "salad" ;

      for ( var i=0;i<foods.length;i++)

      var cell1  =  document.createElement('td').innerHTML = 'foods[i]';    
      var text1 = document.createTextNode(foods[i]) ;

      cell1.appendChild(text1);
      rowrow.appendChild(cell1);
      table1.appendChild(rowrow);
      }

       <div id="divfood"> </div>
       <button onclick="addtd()">Click me</button>`enter code here`
       <table border="2" id="tabletable" cellspacing="5" >
       </table>   

I have tried to run a Javascript loop to create a table with values in it from an array: I appended the text-node and tried that the text node will be the array values, one per td for the length. This is my code so far, it will only create one cell with "undefined" value:

function addtd(){
      var table1 = document.getElementsByTagName('table')[0];
      var rowrow =  document.createElement('tr');
      var foods = new Array();

      foods[0] = "milk" ;`enter code here`
      foods[1] = "meat" ;
      foods[2] = "fruit" ;
      foods[3] = "fish" ;
      foods[4] = "salad" ;

      for ( var i=0;i<foods.length;i++)

      var cell1  =  document.createElement('td').innerHTML = 'foods[i]';    
      var text1 = document.createTextNode(foods[i]) ;

      cell1.appendChild(text1);
      rowrow.appendChild(cell1);
      table1.appendChild(rowrow);
      }

       <div id="divfood"> </div>
       <button onclick="addtd()">Click me</button>`enter code here`
       <table border="2" id="tabletable" cellspacing="5" >
       </table>   

• javascript
• for-loop
• dom
• dom-events

• might be of some help: evontech./login/topic/1079.html – Rubens Commented Dec 27, 2012 at 21:28

3 Answers 3

I would change this -

var cell1  =  document.createElement('td').innerHTML = 'foods[i]'; 

to

var cell1  =  document.createElement('td');
cell1.innerHTML = 'foods[i]'; 

I wouldn't expect that the cell1 will get set correctly when you are chaining its innerHTML inline to cell1, but haven't tested it.

Something like this will loop through your array and create a row of it, as that seems to be what you are trying to do.

var foods = ["milk", "eggs", "lettuce", "tomato"],
    food,
    row = document.createElement("tr");

while (food = foods.shift()) {
    var el = document.createElement("td");
        el.innerText = food;

    row.appendChild( el );
}

document.getElementsByTagName("table")[0].appendChild(row);

You have several errors in your code including missing braces around the for loop and weird looking 'enter code here' sentence on the 6th line. You also forgot to put your JavaScript code inside the <script> tag. Here is the working version of your code:

<script>
function addtd(){
    var table1 = document.getElementsByTagName('table')[0];
    var rowrow =  document.createElement('tr');
    var foods = new Array();

    foods[0] = "milk" ;
    foods[1] = "meat" ;
    foods[2] = "fruit" ;
    foods[3] = "fish" ;
    foods[4] = "salad" ;

    for ( i=0; i <foods.length; i++) {
        var cell1  =  document.createElement('td');
        var text1 = document.createTextNode(foods[i]);
        cell1.appendChild(text1);
        rowrow.appendChild(cell1);
    }
    table1.appendChild(rowrow);
}
</script>

<div id="divfood"> </div>
<button onclick="addtd()">Click me</button>
<table border="2" id="tabletable" cellspacing="5" >
</table>   ​

Here is the jsFiddle demo.