IE 中 Table 底部的动态添加行

Question

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

我使用下面给出的 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);
    // ...
}

IE 中 Table 底部的动态添加行

Dynamic row addition at the bottom of Table in IE

html

javascript

user-interface

internet-explorer