javascript - IE中Table底部动态添加行

Question

基于按钮单击事件，我想在现有表格的底部动态添加行。

我使用 Javascript 做了同样的事情，如下所示。它在 Chrome 浏览器中工作正常，而在 IE 中，行被添加到顶部而不是底部。

如果我多次单击该按钮，则可以看到所有行都在 IE 中逐行添加到顶部。

function addRow(tableID) {

    var table = document.getElementById(tableID);
    var tbody = table.getElementsByTagName('tbody')[0];

    var rowCount = table.querySelectorAll("tbody tr").length;

    var row = tbody.insertRow(-1);

    var cell1 = row.insertCell(0);
    cell1.classList.add("PadLeft10");
    cell1.classList.add("PadBottom5");
    cell1.classList.add("textcenter");
    cell1.width = "2%";
    var element1 = document.createElement("input");
    element1.type = "checkbox";
    element1.name = "element1[" + index + "].selected";
    element1.id = "element1[" + index + "].selected";
    cell1.appendChild(element1);
    [...]
}

我可以在文档中看到 tbody.insertRow(-1) 应该在 IE 和 Chrome 中的最后追加行，但对我来说，在 IE 中它被添加到顶部。我尝试了很多方法，但总的来说，它在 Chrome 中运行良好，但在 IE 中却不行。

有什么帮助吗？

Answer 1

如果 insertRow 部分是问题所在，您可以这样做以可靠地添加到末尾:

var row = document.createElement("tr");
tbody.appendChild(row);

类似地，var cell1 = row.insertCell(0);(如果这也是一个问题)可以是:

var cell1 = document.createElement("tr");
row.insertBefore(cell1, row.firstChild);

最后，MDN表示IE早已支持insertAdjacentHTML (一直回到 IE4)，因此如果您愿意，整个方法可以替换为以下内容:

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var tbody = table.querySelector("tbody");
    var rowCount = table.querySelectorAll("tr").length; // Or: `= table.rows.length;`

    // ***Where does `index` come from? Did you mean `rowCount`?
    var name = "element1[" + index + "].selected";
    var html =
        '<tr>' +
            '<td class="PadLeft10 PadBottom5 textcenter" width="2%">' +
                '<input type="checkbox" name="' + name + '" id="' + name + '">' +
            '</td>' +
        '</tr>';

    tbody.insertAdjacentHTML("beforeend", html);
    // ...
}