Generate a 4 column table from javascript array data

Question

My question is very similar to How to Generate 3x3 HTML Table From an JavaScript Array the only problem is that the answer I prefer in that thread I cant seem to make work (I like it because it does not use innerHTML).

My current code:

var alphabet = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
var table =  document.createElement("table");
var i = 0;
for (var r = 0; r < 4; r++) {
    var row = table.insertRow();
    for (var c= 0; c < 4; c++) {
        var cell = row.insertCell();
        cell.appendChild(document.createTextNode(alphabet[i++]));
    }
}

document.body.appendChild(table);

Basically when I include this .js file in my html document nothing happens. I tried creating a table and loading it inside of it also, but that did nothing. I am probably missing something obvious here.

mplungjan · Accepted Answer · 2016-09-01 08:04:53Z

1

Try

window.onload = function() {
  var alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
  var table = document.createElement("table");
  var i = 0;
  for (var r = 0; r < 4; r++) {
    var row = table.insertRow(r);
    for (var c = 0; c < 4; c++) {
      var cell = row.insertCell(c);
      cell.appendChild(document.createTextNode(alphabet[i++]));
    }
  }

  document.body.appendChild(table);
}

edited Sep 1, 2016 at 8:04

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Mar 8, 2011 at 23:54

Ian Hughes

4012 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tehaaron Over a year ago

This combined with <body onLoad="load()"> in the html file did the trick. Thanks!

mplungjan Over a year ago

The comment above is no longer relevant.

Murali VP · Accepted Answer · 2011-03-08 23:36:27Z

0

Don't just include, put this in onload

<script type="text/javascript">
function load()
{
// your code here
}
</script>
</head>

<body onload="load()">

answered Mar 8, 2011 at 23:36

Murali VP

6,4674 gold badges32 silver badges36 bronze badges

Collectives™ on Stack Overflow

Generate a 4 column table from javascript array data

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related