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

Ich habe eine AJAX-Anwendung, die ein JSON-Objekt herunterlädt und die Daten zum Hinzufügen von Zeilen zu einer HTML <Tabelle> mit Javascript DOM-Funktionen verwendet. Es funktioniert perfekt ... außer im Internet Explorer. IE gibt keine Art von Fehler, und ich habe so gut wie ich verifiziert, dass der Code vom Browser ausgeführt wird, aber es hat einfach keinen Effekt. Ich habe diese schnelle und schmutzige Seite, das Problem zu demonstrieren:Kann nicht dynamisch zu einem <TABLE> in IE Zeilen hinzufügen?

<!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. Kennt jemand eine gute Abhilfe für dieses Problem, oder mache ich vielleicht etwas falsch?

Quelle

2009-05-01 Joshua Carmody

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>

Quelle

2009-05-01 19:01:24

eigentlich sollte 'tableElement.getElementsByType ('tbody')' zurückgeben, was hier gewünscht wird .... –

eigentlich, sollte zurückgeben, was hier gewünscht ist –

Sorry Leute, immer noch ein bisschen neu auf den Kommentar/Antwort Syntax Unterschiede. Offensichtlich wollte Code-Style-Formatierung auf das Codefragment setzen. –

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

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 vollständig in allen gängigen Browsern getestet wurde und Quirks berücksichtigt.

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

Ihre letzte Funktion wie folgt aussehen könnte:

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

Quelle

2009-05-01 18:57:01 EoghanM

JQuery eine weitere sehr gute Alternative ist der Code zur Hand gewalzt. – GalacticCowboy

+1 für die Verwendung von MochiKit (meine Lieblingsbibliothek), aber Sie haben die tatsächliche Antwort verpasst - er muss Zeilen an einen TBody für IE anhängen, um die Zeilen zu erkennen. –

Ich habe nicht erkannt, dass appendChildNodes nicht funktionierte - ich hatte insertSiblingNodes in meinem eigenen Code verwendet, was funktioniert - ich habe die Antwort aktualisiert, um eine funktionierende Lösung wiederzugeben. – EoghanM

Offenbar in IE müssen Sie Ihre Zeile anhängen zu das TBody-Element, nicht das Table-Element ... Siehe Diskussion unter Ruby-Forum.

auf die Diskussion dort erweitern, die < Tabelle> ist Markup im Allgemeinen durchgeführt, ohne explizite < thead> und < tbody> Markup, aber die < tbody> -Element ist, wo Sie eigentlich Ihre neue Zeile hinzufügen müssen, als < table> enthält keine < tr> Elemente direkt.

Quelle

2009-05-01 18:59:02

Anhängend an tbody funktioniert konsistent in allen Browsern, so ist es sicher, es immer zu tun. – JPot

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

Antwort

Verwandte Themen