Wie createElement verwendet wird, um eine neue Tabelle zu erstellen?

Warum funktioniert der folgende Code nicht?Wie createElement verwendet wird, um eine neue Tabelle zu erstellen?

<html> 
<head> 
    <script type="text/javascript"> 
    function addTable() { 
     var table = document.createElement('table'); 
     table.innerHTML = "<tr><td>123</td><td>456</td></tr>"; 
     document.getElementById("addtable").appendChild(table); 
    } 
    </script> 
</head> 
<body> 
    <input type="submit" value="New Table" onClick="addTable()"/> 
    <div id="addtable"></div> 
</body> 
</html>

Quelle

2010-02-24 yeeen

Nach bestem Wissen und Gewissen, die Innerhtml Eigenschaft eines table Element oder Tabellenabschnitt Element-Einstellung (wie tbody oder thead) funktioniert nicht auf Internet Explorer (EDIT: Ich habe gerade überprüft - mit ietester und schlicht IE8 Das Ergebnis ist "unbekannter Laufzeitfehler" für IE6 und IE8, und es stürzt IE7 ab, aber das könnte ein IEtester-spezifisches Problem sein.

Der DOM standard Weg Zeilen eine Tabelle der Zugabe der insertRow() Methode auf einem Tisch oder Tischabschnitt Element verwendet (sucht HTMLTableElement und HTMLTableSectionElement in der DOM Spezifikation):

<script type="text/javascript"> 
function addTable() { 
    var c, r, t; 
    t = document.createElement('table'); 
    r = t.insertRow(0); 
    c = r.insertCell(0); 
    c.innerHTML = 123; 
    c = r.insertCell(1); 
    c.innerHTML = 456; 
    document.getElementById("addtable").appendChild(t); 
} 
</script>

Im Skript besteht Es wurde kein expliziter Tabellenabschnitt erstellt. AFAIK, ein TBODY wird automatisch erstellt und Zeilen werden dort eingefügt.

EDIT: in Bezug auf IE, sollte ich darauf hinweisen, dass Sie eine Tabelle mit Inhalt und alle hinzufügen können, indem Sie die innerHTML Eigenschaft, aber die HTML, die Sie dort injizieren müssen eine vollständige Tabelle sein. So funktioniert das, sogar auf IE:

<script type="text/javascript"> 
function addTable() { 
    var html = "<table><tr><td>123</td><td>456</td></tr></table>"; 
    document.getElementById("addtable").innerHTML = html; 
} 
</script>

Quelle

2010-02-24 09:18:01

Ja, tatsächlich wirft es Laufzeitfehler! Wir sollten nach dieser Methode oder traditionellen create/append-Zyklen für alle tbody, tr und td gehen. – vpram86

+1 In allen Konten korrigieren. 'innerHTML' ist in IE schreibgeschützt für' table' und 'tbody'. –

ya, tbody funktioniert nicht in IE. Aber der Code, den du angegeben hast, scheint auch nicht zu funktionieren ... – yeeen

Wie createElement verwendet wird, um eine neue Tabelle zu erstellen?

Antwort

Verwandte Themen