javascript - Javascript 自动将 s 添加到我的表格元素中

Question

从这个截图可以看出：

每个元素都被放入自己的 tr 中。

我不希望这样，我只希望每个元素都在 td 中，然后用一个 tr 包围所有内容

HTML：

<div id='result'>
    <table class='table'>
        <thead>
            <tr><th>Question</th><th>Animal</th><th>Expected</th><th>You Picked</th><th>Result</th></tr>
        </thead>
        <tbody id='result-table'>
        </tbody>
    </table>
</div>

Javascript：

function displayResult() {
    let tableDisplay = document.getElementById("result-table")
    let theResult = document.getElementById("result")
    theResult.style.display = "block"

    for(let i = 0; i<qArr.length; i++){
        tableDisplay.innerHTML = tableDisplay.innerHTML + `<td>` + qArr[i] + `</td>`
    }
    // qArr.forEach(x => {
    //     tableDisplay.innerHTML = tableDisplay.innerHTML + `<td>` + x + `</td>`
    // })

}

标签： javascripthtml

Answer 1

td不能为孩子tbody，只能为tr。因为浏览器独立添加了这个元素。您需要数据来result-row.

<tbody id='result-table'>
    <tr id='result-row'></tr>
</tbody>

顺便说一句，与 DOM 的交互是一项昂贵的操作。首先最好形成一个数组，然后插入一次。