javascript - 无法在 IE 中动态添加行到 <TABLE> 中？

我有一个 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 都没有显示应该添加的附加行。我不明白为什么。有谁知道解决这个问题的好方法，或者我可能做错了什么？

最佳答案

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

关于javascript - 无法在 IE 中动态添加行到 <TABLE> 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/812693/

上一篇：javascript - 在 Javascript 中使用 document.domain 的同源策略解决方法

下一篇：sql - 如何在SQL中从XML中获取指定的节点

javascript - 水平固定列在 IE 上滞后

javascript - IE 7/8 javascript排序错误 "Number Expected"

javascript - jQuery Div滚动功能: Issue in IE

javascript - 如何在 keyup 上传递两个变量？

javascript - 如何使 Microsoft Internet Explorer 表现得像一个符合标准的浏览器？

php - 直接从 jQuery 插件发出 Ajax 请求是不好的做法吗？

Jquery ajax abort() 在控制台上给出错误

javascript - 更改源 URL 时创建图像 CSS 转换

javascript - jsonp 和 POST 操作