Code doesn't add rows to table (HTML / JavaScript)

Question

I am working on my website and I want to make a table with a number of rows equal to the length of array game_names, using Javascript. The whole code is:

var game_names = [
  "first_game",
  "second_game",
  "third_game",
  "fourth_game",
  "fifth_game"
];

var parent = document.getElementById("games");

for (i=0;i<=10;i++){
    var child = document.createElement("tr");
    var node = document.createTextNode("hi!");
    child.appendChild(node);
    parent.appendChild(child);
}

In the HTML code is an empty table (without any cells) and with the id "games". The code:

<table id="games" border="10px" align="center" width="100px">         
</table>

For some reason the code doesn't add any rows to the table. I tested that the code runs down when the page is loaded (I put an alert("hi!") to the beginning of the code and it worked). I have no idea what's wrong...

Please edit the question title. *Something doesn't want to work* is neither descriptive, nor helpful for future readers. — BenM, Aug 25 '17 at 18:17
`tr` can't show text, you need a `td` element to add the text, and then append the `td` to the `tr`. — Teemu, Aug 25 '17 at 18:18
You need `` elements, but the code works fine in modern browsers that correct markup: https://jsfiddle.net/ewp85sz2/ — BenM, Aug 25 '17 at 18:18
Works for me (firefox and IE11) https://jsfiddle.net/q1541anq/ — litelite, Aug 25 '17 at 18:19
@BenM Looks like [the markup is not corrected](https://jsfiddle.net/5eykb44z/), but the text shows, though. — Teemu, Aug 25 '17 at 18:21
There are smarter ways to debug than to put `alert('hi')` at the beginning of the script. That alone does not give you much info... — trincot, Aug 25 '17 at 18:21
That's true that I should put in a td tag, but I should see an empty row in my table. Unfortunatelly I don't see any... — Simplemathic, Aug 25 '17 at 18:21
Could it be that you run that code before the DOM is loaded? — litelite, Aug 25 '17 at 18:23

score 0 · Accepted Answer · answered Aug 25 '17 at 18:25

The code seems to work but would makes strange html. Rows (tr elements) should contain cells (td elements). And your not iterating over your game_names array your just iterating from 0 to ten. See my example of your code below.

var game_names = [
  "first_game",
  "second_game",
  "third_game",
  "fourth_game",
  "fifth_game"
];

var parent = document.getElementById("games");


for (i=0;i<=game_names.length;i++){
    var childRow = document.createElement("tr");
    var childCell = document.createElement("td");
    var node = document.createTextNode("hi!");
    childRow.appendChild(childCell);
    childCell.appendChild(node);
    parent.appendChild(childRow);
}

Yes I changed the iterating btw, sorry for that – Simplemathic Aug 25 '17 at 18:27 — Simplemathic, Aug 25 '17 at 18:27

Simplemathic · Answer 2 · 2017-08-25T18:31:23.350

0

Okay I solved the problem. I put the script after the table, because it was in the head tag! Thank you for the answers!

edited Aug 25 '17 at 18:31

answered Aug 25 '17 at 18:30

Simplemathic

77
1
3
13

2

Why did you accept an answer which **didn't say that** then? – Quentin Aug 25 '17 at 18:36

Code doesn't add rows to table (HTML / JavaScript)

2 Answers2