为什么这个表没有正确排序？

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;

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

<thead id="tablehead">

    <tr>

        <th>List[0]</th>

        <th>List[1]</th>

        <th>List[2]</th>

    </tr>

</thead>

Answer 2

const tablebody = document.querySelector('table#table tbody')

  ,   list =

       [ [ 12,  4, 22 ]

       , [ 11, 32,  7 ]

       , [  9, 16, 13 ]

       ]

for (let row of list) 

  {

  let nRow = tablebody.insertRow()

  for( let vCol of row)

    {

    nRow.insertCell().textContent = vCol

    }

  }

body {

  background-color : black;

  color            : white;

  }

table  {

  border-collapse  : collapse;

  }

table td {

  padding    : 5px;

  width      : 20px;

  height     : 20px;

  border     : 1px solid green;

  text-align : center;

  }

table thead {

  background-color : darkblue;

  }

<table id="table">

  <thead>

    <tr>

      <td>List[0]</td>

      <td>List[1]</td>

      <td>List[2]</td>

    </tr>

  </thead>

  <tbody>

  </tbody>

</table>