用数组中的值填充表行

Question

我正在使用 JavaScript DOM 创建一个表，我需要将数组 (thValues) 中的所有值插入到 TR（表行）中包含的每个 TH 中。 我该怎么做？

 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

您需要两个循环：一个用th单元格填充首行； 一个用td单元格创建主体行。 就目前而言，您正在为每个标题值创建一个新行，而不是将它们全部放在一行中。 您还将头单元格放在tbody而不是thead 。

以下是创建标题行的方法。

 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>

从您的帖子中不清楚您想在tbody放入什么，因为您只是一遍又一遍地重复“时间 1”。 因此，我留下了一些用于填充主体的伪代码。

const一句，除非您计划重新分配变量（出于多种原因），否则您应该使用const而不是let 。

Answer 2

我意识到我在代码中缺少什么来实现我想要的。 我忘了添加一个 i 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">