javascript - 为什么这张表没有正确排序？

Question

不知道为什么表格没有正确地按行和列排序。 我正在尝试创建一个二维数组，然后使用嵌套的 for 循环自动创建一个表。

list = [
  [12, 4, 22],
  [11, 32, 7],
  [9, 16, 13]
];
for (var i = 0; i < list.length; i++) {
  tablebody.innerHTML += "<tr>";
  for (var j = 0; j < list[i].length; j++) {
    tablebody.innerHTML += "<td>" + list[i][j] + "</td>";
  }
  tablebody.innerHTML += "</tr>"
}

body {
  background-color: black;
  color: white;
}

<table id="table">
  <thead id="tablehead">
    <tr>List[0]</tr>
    <tr>List[1]</tr>
    <tr>List[2]</tr>
  </thead>
  <tbody id="tablebody">
  </tbody>
</table>

Answer 1

您不能向 innerHTML 添加片段 .当你做 tablebody.innerHTML+="<tr>"; , 浏览器自动添加一个结束 </tr>紧接着。

您需要将字符串构建到它自己的变量中，然后执行 tablebody.innerHTML = yourTableVar;之后。

var tableData = '';

for (var i = 0; i < list.length; i++) {
  tableData += "<tr>";
  for (var j = 0; j < list[i].length; j++) {
    tableData += "<td>" + list[i][j] + "</td>";
  }
  tableData += "</tr>"
}

tablebody.innerHTML = tableData;

此外，您的 <thead> 的 HTML是不正确的。你需要有一个 <tr>作为标题行和 <th>带有列标题的标签:

<thead id="tablehead">
    <tr>
        <th>List[0]</th>
        <th>List[1]</th>
        <th>List[2]</th>
    </tr>
</thead>