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">

Answer 1

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 (eg 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 ).

Answer 2

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">