javascript - 用数组中的值填充表行

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 创建 body 行细胞。就目前而言，您正在为每个标题值创建一个新行，而不是将它们全部放在一行中。你也把你的头细胞放在 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 (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>

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

顺便说一句，你应该使用 const而不是 let除非您计划重新分配变量 ( for a number of reasons )。