从多个数组创建一个 HTML 表（Javascript）

Question

我正在尝试从多个表中的数据创建一个 HTMl 表，其中的值和不同数组中值的长度相同。 我将通过将其限制为两个表来简化这里的示例。

我想要得到这样的东西：

但是用我的代码我有：

此外，我不知道如何添加平均线并在年龄下填充它，我尝试仅使用姓名和年龄来轻松完成。 如果有人可以帮助我:)

JS：

let names = ["X","Y"]
let ages = [22,10]

const newTable = document.createElement("table");
    newTable.innerHTML = "<thead><th>Name</th><th>Index</th></thead>";
    for (let name of names) {

      let newRow = document.createElement("tr");
      const tdName= document.createElement("td");
      tdName.textContent = name;
      newRow.appendChild(tdName);
      newTable.appendChild(newRow);
    }

    for (let age of ages ) {

      let newRow = document.createElement("tr");
      const tdAge= document.createElement("td");
      tdAge.textContent = String(age);
      newRow.appendChild(tdAge);
      newTable.appendChild(newRow);
    }

    const target = document.getElementById('target');
    target.appendChild(newTable);
  }

HTML：

<div id="target"></div>

Answer 1

不要为每个姓名和年龄创建一个新行；您想要为每个“组”项目分配一行，因此循环遍历长度（检查它们是否匹配），然后为每个相应的数组项目创建一个单元格。

let names = ["X", "Y"]
let ages = [22, 10]

const newTable = document.createElement("table");
newTable.innerHTML = "<thead><th>Name</th><th>Index</th></thead>";

if (names.length == ages.length) {
  for (let i = 0; i < names.length; i++) {

    let newRow = document.createElement("tr");
    //name
    const tdName = document.createElement("td");
    tdName.textContent = names[i];
    newRow.appendChild(tdName);
    //age
    const tdAge = document.createElement("td");
    tdAge.textContent = String(ages[i]);
    newRow.appendChild(tdAge);
    newTable.appendChild(newRow);
  }
}
const target = document.getElementById('target');
target.appendChild(newTable);

<div id="target"></div>