不知道为什么表格没有正确排序为行和列。我试图创建一个二维数组，然后使用嵌套 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>
2 回答
慕村225694
TA贡献1880条经验 获得超4个赞
您无法将片段添加到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>
慕容708150
TA贡献1831条经验 获得超4个赞
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>
添加回答
举报
0/150
提交
取消