JS and DOM, trying to create table

Question

I tried to create table but I can't create td in every tr, td is creating only in first td what is in table, how I can solve the problem?

// Creating div

var main = document.createElement("div")
main.innerHTML = ""
document.body.appendChild(main)
main.setAttribute("id", "main")

//Creating Icons

var puzzleico = document.createElement("div")
puzzleico.innerHTML = ""
document.getElementById("main").appendChild(puzzleico)
puzzleico.setAttribute("id", "puzzleico")
var puzzleico = document.getElementById("puzzleico").onclick = function() {createtable()};

//Creating tr and td

function createtable() {
//Creating Table
var table = document.createElement("table")
table.innerHTML = ""
document.body.appendChild(table)
table.setAttribute("id", "table")

for (var i = 0; i < 50; i++) {
    var tr = document.createElement("tr")
    tr.innerHTML = ""
    document.getElementById("table").appendChild(tr)
    tr.setAttribute("id", "tr")
    var td = document.createElement("td")
    td.innerHTML = ""
    document.getElementById("tr").appendChild(td)
}
}

Ivar · Answer 1 · 2020-06-18T07:25:41.137

Element id's within a document need to be unique. The issue here is that your document.getElementById("tr") will always return the first element it finds with that id and so, all of your <td> elements will be appended to the first <tr>.

In order to fix it you can remove the tr.setAttribute("id", "tr") line and use the already existing tr variable to append the td child to.

function createtable() {
  //Creating Table
  var table = document.createElement("table")
  table.innerHTML = ""
  document.body.appendChild(table)
  table.setAttribute("id", "table")

  for (var i = 0; i < 50; i++) {
    var tr = document.createElement("tr")
    tr.innerHTML = ""
    document.getElementById("table").appendChild(tr);
    var td = document.createElement("td");
    td.innerHTML = "test"
    tr.appendChild(td)
  }
}
createtable();

The above code will work, but using the already declared variables instead of finding them again can also be applied to the table case. Also, table.innerHTML = "" doesn't add any value because the innerHTML is already empty when you create a new element.

function createtable() {
  //Creating Table
  var table = document.createElement("table");
  document.body.appendChild(table);

  for (var i = 0; i < 50; i++) {
    var tr = document.createElement("tr");
    table.appendChild(tr);

    var td = document.createElement("td");
    td.innerHTML = "test";
    tr.appendChild(td);
  }
}

Maybe also use the `table` variable instead of the `document.getElementById("table")`; Not necessary but function will break if you wanna make multiple tables. — Reyno, Jun 18 '20 at 07:20

score 0 · Answer 2 · answered Jun 18 '20 at 07:24

You can use this to create the table:

function createTable(){
  //Creating And Appending Child
  let table = document.createElement('table');
  document.body.appendChild(table);

  for(let i = 0; i < 50; i++){
    let tr = document.createElement('tr');
    let td = document.createElement('td');
    td.innerHTML = i;
    tr.appendChild(td);
    table.appendChild(tr);
  }
}

Here is the link to my codepen: https://codepen.io/prabodhpanda/pen/gOPLqYe?editors=1010

score 0 · Answer 3 · answered Jun 18 '20 at 07:26

id attribute of each element in DOM should be unique. You set same id for each tr element you create. document.getElementById element always returns the first element match by the id. This is the reason of the issue. Your last code snippet should be:

function createtable() {
    //Creating Table
    var table = document.createElement("table")
    table.innerHTML = ""
    document.body.appendChild(table)
    table.setAttribute("id", "table")

    for (var i = 0; i < 50; i++) {
        var tr = document.createElement("tr")
        tr.innerHTML = ""
        document.getElementById("table").appendChild(tr)
        tr.setAttribute("id", "tr" + i) // Check this
        var td = document.createElement("td")
        td.innerHTML = ""
        document.getElementById("tr" + i).appendChild(td) // Check this
    }
}

tr.appendChild(td) should also work if you don't need ID attribute.

score 0 · Accepted Answer · answered Jun 18 '20 at 07:30

I edited your answer and got what I want.

    //Creating tr and td
function createtable() {
    //Creating Table
    var table = document.createElement("table")
    table.innerHTML = ""
    document.body.appendChild(table)
    table.setAttribute("id", "table")

    for (var i = 0; i < 50; i++) {
        var tr = document.createElement("tr")
        tr.innerHTML = ""
        document.getElementById("table").appendChild(tr)
        tr.setAttribute("id", "tr")
        for (var v = 0; v < 50; v++) {
            var td = document.createElement("td")
            td.innerHTML = ""
            tr.appendChild(td)  
        }
    }
}

JS and DOM, trying to create table

4 Answers4