在函数

Question

我有一张如下表格，

<table>
    <div id="boards"></div>
</table>

我有这样的功能，

function drawBoard(item, index) {
    boards = document.getElementById("boards");
    boards.innerHTML = boards.innerHTML + "<tr><td><div id=\x22Board" + index + "\x22></div></td></tr>";
}

此外，将{{winners}}作为包含3个条目的数组

var winners = {{winners}};
winners.forEach(drawBoard);

但是，这样生成的表只有1行而不是3行。看起来td和tr在某种程度上被忽略了。有什么想法吗？

Answer 1

谢谢barmar。在我将其更改为使用div表后，它可以工作，如下所示：

<div class="rTable">
    <div id="boards"></div>
</div>

function drawBoard(item, index) {
    boards = document.getElementById("boards");
    boards.innerHTML = boards.innerHTML + "<div class=\x22rTableRow\x22>";
    boards.innerHTML = boards.innerHTML + "<div class=\x22rTableCell\x22><div id=\x22Board" + index + "\x22></div></div>";
    boards.innerHTML = boards.innerHTML + "<div class=\x22rTableCell\x22>" + index + "</div>";
    boards.innerHTML = boards.innerHTML + "</div>";
}

var winners = {{winners}};
winners.forEach(drawBoard);