Fill table rows with values from an array

Question

I'm creating a table using JavaScript DOM and I need to insert all the values from the array (thValues) to each of the TH contained in a TR (table row). How I can do it?

let thValues = ["Text 1", "Text 2", "Text 3", "Text 4", "Text 5", "Text 6"];

let pickTableZone = document.getElementById("tableDetails");
let table = document.createElement("table");

pickTableZone.appendChild(table);
table.setAttribute("class", "table table-responsive-sm table-striped");

let tableBody = document.createElement("tbody");
table.appendChild(tableBody); //adding tbody to table

//for the length of thValues create table rows
for (let i = 0; i < thValues.length; i++) {
    let tableRow = document.createElement("tr");
    tableBody.appendChild(tableRow); //adding TR to TBODY

    let tableHead = document.createElement("th");
    tableRow.appendChild(tableHead); //adding TH to TR
    tableHead.setAttribute("scope", "row"); //adding attributes to TH

    let text = document.createTextNode(thValues[0]); //Assign each text from the thValues in each TH from the TR's
    tableHead.appendChild(text); //adding text to TH

    let tableData = document.createElement("td");
    tableRow.appendChild(tableData); //adding TD to TR

    let textInTD = document.createTextNode("Time 1");
    tableData.appendChild(textInTD); //adding text to TD
}

table, th, td {
  border: 1px solid gray;
  border-collapse: collapse;
  padding: 1rem;
}

<div id="tableDetails">

score 2 · Accepted Answer · answered Jan 02 '20 at 16:13

You need two loops: one to populate the head row with th cells; one to create the body rows with td cells. As it stands, you're creating a new row for each header value instead of putting all of them in a single row. You're also putting your head cells in tbody instead of thead.

Here is how you could create the header row.

const thValues = ["Text 1", "Text 2", "Text 3", "Text 4", "Text 5", "Text 6"];

const pickTableZone = document.getElementById("tableDetails");
const table = document.createElement("table");

pickTableZone.appendChild(table);
table.setAttribute("class", "table table-responsive-sm table-striped");

const tableHead = document.createElement("thead");
table.appendChild(tableHead); //adding thead to table

const headRow = document.createElement("tr");
tableHead.appendChild(headRow); // Row for the head cells.

// Add each header.
for (let i = 0; i < thValues.length; ++i) {
  const headCell = document.createElement("th");
  headRow.appendChild(headCell); //adding head cell to head row

  const text = document.createTextNode(thValues[i]);
  headCell.appendChild(text); //adding text to TH
}

const tableBody = document.createElement("tbody");
table.appendChild(tableBody); //adding tbody to table

// for each row of data
//   add a tr to tbody
//   for each column (e.g. thValues.length)
//     add a td to the tr

table, th, td {
  border: 1px solid gray;
  border-collapse: collapse;
  padding: 1rem;
}

<div id="tableDetails"></div>

It's not clear from your post what you want to put in the tbody since you're just repeating "Time 1" over and over. I've therefore left some pseudocode for populating the body.

As an aside, you should use const instead of let unless you plan on reassigning the variable (for a number of reasons).

Thanks for your detailed explanation! I realized what I was missing in my code, I forgot to replace zero with i in document.createTextNode(thValues[i]) — JustMe, Jan 02 '20 at 16:47

score 0 · Answer 2 · answered Jan 02 '20 at 16:50

I realized what I was missing in my code to achieve what I wanted. I forgot to add an i to let text = document.createTextNode(thValues[i]);

let thValues = ["Text 1", "Text 2", "Text 3", "Text 4", "Text 5", "Text 6"];

let pickTableZone = document.getElementById("tableDetails");
let table = document.createElement("table");

pickTableZone.appendChild(table);
table.setAttribute("class", "table table-responsive-sm table-striped");

let tableBody = document.createElement("tbody");
table.appendChild(tableBody); //adding tbody to table

//for the length of thValues create table rows
for (let i = 0; i < thValues.length; i++) {
    let tableRow = document.createElement("tr");
    tableBody.appendChild(tableRow); //adding TR to TBODY

    let tableHead = document.createElement("th");
    tableRow.appendChild(tableHead); //adding TH to TR
    tableHead.setAttribute("scope", "row"); //adding attributes to TH

    let text = document.createTextNode(thValues[i]); //Assign each text from the thValues in each TH from the TR's
    tableHead.appendChild(text); //adding text to TH

    let tableData = document.createElement("td");
    tableRow.appendChild(tableData); //adding TD to TR

    let textInTD = document.createTextNode("Time 1");
    tableData.appendChild(textInTD); //adding text to TD
}

table, th, td {
  border: 1px solid gray;
  border-collapse: collapse;
  padding: 1rem;
}

<div id="tableDetails">

Fill table rows with values from an array

2 Answers2