不能在 IE 中动态地将行添加到 <TABLE> 中？答案

【问题标题】：Can't dynamically add rows to a <TABLE> in IE?不能在 IE 中动态地将行添加到 <TABLE> 中？
【发布时间】：2010-10-23 04:45:42
【问题描述】：

我有一个 AJAX 应用程序，它下载 JSON 对象并使用该数据使用 Javascript DOM 函数向 HTML

添加行。它完美地工作......除了在 Internet Explorer 中。 IE 没有给出任何类型的错误，我已经尽我所能验证了代码正在由浏览器执行，但它根本没有任何效果。我创建了这个又快又脏的页面来演示这个问题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body>

<table id="employeetable">
    <tr>
        <th>Name</th>
        <th>Job</th>
    </tr>
</table>

<script type="text/javascript">
    function addEmployee(employeeName, employeeJob) {
        var tableElement = document.getElementById("employeetable");
        if (tableElement) {
            var newRow = document.createElement("tr");
            var nameCell = document.createElement("td");
            var jobCell = document.createElement("td");
            nameCell.appendChild(document.createTextNode(employeeName));
            jobCell.appendChild(document.createTextNode(employeeJob));
            newRow.appendChild(nameCell);
            newRow.appendChild(jobCell);
            tableElement.appendChild(newRow);
            alert("code executed!");
        }
    }

    setTimeout("addEmployee(\"Bob Smith\", \"CEO\");", 1000);
    setTimeout("addEmployee(\"John Franks\", \"Vice President\");", 2000);
    setTimeout("addEmployee(\"Jane Doe\", \"Director of Marketing\");", 3000);
</script>

</body></html>

我没有尝试过 IE 8，但 IE 7 和 IE 6 都没有显示应该添加的额外行。我无法理解为什么。有谁知道解决这个问题的好方法，还是我做错了什么？

【问题讨论】：

标签： javascript ajax internet-explorer cross-browser html-table

【解决方案1】：

编辑：现在可以在 IE 中使用！ insertSiblingNodesAfter 使用兄弟节点的 parentNode，恰好是 IE 中的一个 tbody

当您尝试操作 DOM 跨浏览器时，很难知道存在哪些怪癖。我建议您使用已在所有主要浏览器上进行全面测试的现有库，并考虑到怪癖。

我个人使用 MochiKit，你可以在这里深入了解 DOM 操作： http://mochikit.com/doc/html/MochiKit/DOM.html

您的最终函数可能如下所示：

function addEmployee(employeeName, employeeJob) {
    var trs = getElementsByTagAndClassName("tr", null, "employeetable");
    insertSiblingNodesAfter(trs[trs.length-1], TR({}, TD({}, employeeName), TD({}, employeeJob));
    alert("code executed!");
}

【讨论】：

+1 用于使用 MochiKit（我最喜欢的库），但您错过了实际答案 - 他需要将行附加到 TBody 以便 IE 识别行。
我没有意识到 appendChildNodes 不起作用 - 我一直在自己的代码中使用 insertSiblingNodes，它有效 - 我已经更新了答案以反映有效的解决方案。

【解决方案2】：

您需要创建一个 TBODY 元素来添加您的新 TR，然后将 TBODY 添加到您的表中，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body>

<table id="employeetable">
    <tr>
        <th>Name</th>
        <th>Job</th>
    </tr>
</table>

<script type="text/javascript">
    function addEmployee(employeeName, employeeJob) {
        var tableElement = document.getElementById("employeetable");
        if (tableElement) {
            var newTable = document.createElement('tbody');   // New
            var newRow = document.createElement("tr");
            var nameCell = document.createElement("td");
            var jobCell = document.createElement("td");
            nameCell.appendChild(document.createTextNode(employeeName));
            jobCell.appendChild(document.createTextNode(employeeJob));
            newRow.appendChild(nameCell);
            newRow.appendChild(jobCell);
            newTable.appendChild(newRow);   // New
            tableElement.appendChild(newTable);   // New
            alert("code executed!");
        }
    }

    setTimeout("addEmployee(\"Bob Smith\", \"CEO\");", 1000);
    setTimeout("addEmployee(\"John Franks\", \"Vice President\");", 2000);
    setTimeout("addEmployee(\"Jane Doe\", \"Director of Marketing\");", 3000);
</script>

</body></html>

【讨论】：

实际上，tableElement.getElementsByType('tbody') 应该在这里返回所需的内容......
实际上，
```
tableElement.getElementsByType('tbody')
```
应该在这里返回所需的内容
对不起，关于评论/答案语法差异仍然有点新。显然，想在代码片段上放置代码样式的格式。
我知道这是一篇旧帖子，但由于其他人可能仍将其用作参考，因此上述评论对我不起作用。对我有用的是tableElement.getElementsByTagName('tbody')[0]
@Wally：我尝试在我的demo 中添加<tbody>，但它似乎仍然不适用于IE，我的question

【解决方案3】：

显然，在 IE 中，您需要将行附加到 TBody 元素，而不是 Table 元素... 请参阅Ruby-Forum 的讨论。

进一步展开讨论，

标记通常是在没有明确的和标记的情况下完成的，但 ELEMENT 是您实际需要添加新行的地方，就像

一样不直接包含元素。

【讨论】：

附加到 tbody 在所有浏览器中始终有效，因此始终这样做是安全的。