使用JS添加行但添加在旁边而不是下面

Question

我正在尝试向 table 添加信息，但它会将其添加到 table 扩展行旁边，而不是将其添加到其下方。我尝试在其下方添加中断和其他 table 行，但它只是忽略它们并仍然添加到第一行。正在存储的信息是正确的，只是不会去正确的位置。

这是 HTML 原始 table 行 Table before adding Table after adding `

        <table>
            <tr>
                <td class="tbl-hdr">Player 1</td>
                <td class="tbl-hdr">Player 1 Team</td>
                <td class="tbl-hdr">Player 2 Team</td>
                <td class="tbl-hdr">Player 2</td>
                <td class="tbl-hdr date">Date + VOD</td>
            </tr>
        </table>

这是相关的JS `

let template = `
            <tr>
                <td>${name1}</td>
                <td>${name2}</td>
                <td>${team1}</td>
                <td>${team2}</td>
                <td>${date}</td>
                <td>${VOD}</td>
            </tr>`;
table.innerHTML += template;

Answer 1

解决方案

使用 .insertRow(-1) 在 下方插入行 现有行 table 然后使用 .innerHTML附加内容。

let name1="A", name2="B", team1="C", team2="team2", date="date", VOD="VOD"
let template = `
            <tr>
                <td>${name1}</td>
                <td>${name2}</td>
                <td>${team1}</td>
                <td>${team2}</td>
                <td>${date}</td>
                <td>${VOD}</td>
            </tr>`;
            
var table = document.querySelector("table")
var row = table.insertRow(-1);
row.innerHTML += template;

<table>
            <tr>
                <td class="tbl-hdr">Player 1</td>
                <td class="tbl-hdr">Player 1 Team</td>
                <td class="tbl-hdr">Player 2 Team</td>
                <td class="tbl-hdr">Player 2</td>
                <td class="tbl-hdr date">Date + VOD</td>
            </tr>
        </table>

使用JS添加行但添加在旁边而不是下面

Using JS to add rows but adds beside rather than below

javascript

html

rows