在IE浏览器中无法动态添加表格行？

Question

在IE浏览器中无法动态添加表格行？

javascriptajaxinternet-explorercross-browserhtml-table

21

我有一个 AJAX 应用程序，它会下载一个 JSON 对象，并使用 Javascript DOM 函数将数据添加到 HTML <table> 中的行中。在其他浏览器上都能完美运行，但在 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，但是IE7和IE6都没有显示额外的行，这些行据说已经被添加了。我无法理解为什么会这样。是否有人知道解决这个问题的好方法，或者我可能做错了什么？

- Joshua Carmody

3个回答

8

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

在那里扩展讨论，<table>标记通常没有显式的<thead>和<tbody>标记，但实际上需要添加新行的是<tbody>元素，因为<table>不能直接包含<tr>元素。

- Tetsujin no Oni

3

在所有浏览器中，向tbody添加内容的操作始终能够正常工作，因此总是可以安全地这样做。 - JPot

2

编辑：现在可以在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!");
}

- EoghanM

使用MochiKit（我最喜欢的库）加1分，但你错过了实际答案 - 他需要将行附加到TBody中，以便IE识别这些行。 - Jason Bunting

我没有意识到appendChildNodes不起作用 - 我一直在使用insertSiblingNodes在我的代码中，它是有效的 - 我已经更新了答案以反映一个可行的解决方案。 - EoghanM

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wally Lawless · Accepted Answer

您需要创建一个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>