Kann nicht dynamisch Zeilen zu einem in IE hinzufügen?

StackOverflow https://stackoverflow.com/questions/812693

Frage

Ich habe eine AJAX-Anwendung, die ein JSON-Objekt heruntergeladen und verwendet die Datenzeilen in eine HTML hinzuzufügen

mit Javascript DOM-Funktionen. Es funktioniert perfekt ... außer im Internet Explorer. IE nicht geben, jede Art von Fehlern, und ich habe so gut überprüft, wie ich kann, dass der Code vom Browser ausgeführt wird, aber es hat einfach keine Wirkung. Ich habe diese schnelle und schmutzige Seite, das Problem zu demonstrieren: 

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

Ich habe IE nicht versucht 8, aber beide IE 7 und IE 6 zeigen nicht die zusätzliche Zeilen, die angeblich hinzugefügt werden. Ich kann nicht verstehen, warum. Hat jemand eine gute Abhilfe für dieses Problem kennen, oder bin ich vielleicht etwas falsch zu machen?

War es hilfreich?

Lösung

Sie benötigen ein TBODY Element erstellen Sie Ihre neue TR zu und fügen Sie dann den TBODY zu Ihrer Tabelle hinzuzufügen, wie folgt aus: 

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

Andere Tipps

Offenbar in IE müssen Sie Ihre Reihe zum TBody Elemente anzuhängen, nicht das Tischelement ... Siehe Diskussion unter Rubin-Forum .

auf die Diskussion dort erweitern, die

Markup ist in der Regel ohne explizite getan und Markup, aber die -Element ist, wo Sie tatsächlich benötigen, um Ihre neue Zeile hinzufügen, wie
tut nicht enthalten direkt Elemente.

Edit: jetzt funktioniert in IE! insertSiblingNodesAfter verwendet die parentNode des Geschwister, die ein tbody in IE passiert sein

Es ist schwer zu wissen, welche Macken im Geschäft ist, wenn Sie versuchen, den DOM Cross-Browser zu manipulieren. Ich würde empfehlen, dass Sie eine vorhandene Bibliothek verwenden, die in allen gängigen Browsern vollständig getestet wurde, und ist für Macken.

Ich persönlich verwende MochiKit, können Sie in die DOM-Manipulation tauchen hier: http://mochikit.com/doc/html/MochiKit/DOM.html

Ihre letzte Funktion in etwa so aussehen: 

function addEmployee(employeeName, employeeJob) {
    var trs = getElementsByTagAndClassName("tr", null, "employeetable");
    insertSiblingNodesAfter(trs[trs.length-1], TR({}, TD({}, employeeName), TD({}, employeeJob));
    alert("code executed!");
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top