无法在IE中动态添加行?<table> </table>

时间:2009-05-01 18:47:33

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

我有一个AJAX应用程序,它下载一个JSON对象并使用这些数据向HTML&lt; table&gt;添加行。使用Javascript DOM功能。它完美无缺......除了在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都没有显示应该添加的额外行。我无法理解为什么。有没有人知道这个问题的好方法,或者我可能做错了什么?

3 个答案:

答案 0 :(得分:17)

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

答案 1 :(得分:8)

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

扩展讨论,&lt; table&gt;标记通常在没有明确的&lt; thead&gt;的情况下完成。和&lt; tbody&gt;标记,但&lt; tbody&gt; ELEMENT是您实际需要添加新行的地方,如&lt; table&gt;不包含&lt; tr&gt;元素直接。

答案 2 :(得分: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!");
}