Fatal编程技术网
  • javascript/
  • Javascript Can'；t将行动态添加到<；表>；在IE里？

Javascript Can'；t将行动态添加到<；表>；在IE里？

javascript ajax internet-explorer

Javascript Can'；t将行动态添加到<；表>；在IE里？,javascript,ajax,internet-explorer,cross-browser,html-table,Javascript,Ajax,Internet Explorer,Cross Browser,Html 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/x

我有一个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>


名称
工作
函数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”）；
appendChild（document.createTextNode（employeeName））；
appendChild（document.createTextNode（employeeJob））；
newRow.appendChild（nameCell）；
newRow.appendChild（jobCell）；
tableElement.appendChild（newRow）；
警报（“代码已执行！”）；
}
}
setTimeout（“addEmployee（\'Bob Smith\'，\'CEO\'”）；1000）；
setTimeout（“addEmployee”（“John Franks\”，“副总裁”）；2000年；
setTimeout（“addEmployee（\'Jane Doe\'，\'Marketing\”）；“，3000）；
我没有尝试IE8，但IE7和IE6都没有显示应该添加的其他行。我不明白为什么。有人知道解决这个问题的好方法吗，或者我可能做错了什么吗？

编辑：现在在IE中工作！insertSiblingNodesAfter使用同级的parentNode，它恰好是IE中的tbody

当您试图操纵DOM跨浏览器时，很难知道会有什么怪癖。我建议您使用一个已经在所有主要浏览器上进行了全面测试的现有库，并考虑到一些奇怪之处

就我个人而言，我使用MochiKit，您可以在这里深入了解DOM操作：

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

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

<!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>
显然，在IE中，您需要将行附加到TBody元素，而不是Table元素。。。 见第页的讨论

展开这里的讨论，标记通常没有显式和标记，但是元素是您实际需要添加新行的地方，因为它不直接包含元素。

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

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

<!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>


名称
工作
函数addEmployee（employeeName，employeeJob）{
var tableElement=document.getElementById（“employeetable”）；
if（tableElement）{
var newTable=document.createElement（'tbody'）；//新建
var newRow=document.createElement（“tr”）；
var nameCell=document.createElement（“td”）；
var jobCell=document.createElement（“td”）；
appendChild（document.createTextNode（employeeName））；
appendChild（document.createTextNode（employeeJob））；
newRow.appendChild（nameCell）；
newRow.appendChild（jobCell）；
newTable.appendChild（newRow）；//新建
tableElement.appendChild（newTable）；//新建
警报（“代码已执行！”）；
}
}
setTimeout（“addEmployee（\'Bob Smith\'，\'CEO\'”）；1000）；
setTimeout（“addEmployee”（“John Franks\”，“副总裁”）；2000年；
setTimeout（“addEmployee（\'Jane Doe\'，\'Marketing\”）；“，3000）；
事实上，
tableElement.getElementsByType（'tbody'）
应该返回此处所需的内容……事实上，tableElement.getElementsByType（'tbody'）应该返回此处所需的内容抱歉，关于注释/回答语法的差异仍然有点新。显然，我想在代码片段上添加代码样式的格式。我意识到这是一篇老文章，但由于其他人可能仍然使用它作为参考，上面的评论对我不起作用。对我起作用的是
tableElement.getElementsByTagName（'tbody'）[0]
@Wally:我尝试在我的中添加
，但它似乎对IE、我的+1使用MochiKit（我最喜欢的库）不起作用，但是你错过了实际的答案-他需要将行附加到TBody以便IE识别行。我没有意识到appendChildNodes不起作用-我一直在我自己的代码中使用insertSiblingNodes，这是有效的-我已经更新了答案以反映出一个有效的解决方案。在所有浏览器中，将行附加到TBody都是有效的，所以总是这样做是安全的。