2010-02-24 24 views
5

Dlaczego poniższy kod nie działa?Jak użyć createElement, aby utworzyć nową tabelę?

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

Odpowiedz

21

Zgodnie z moją najlepszą wiedzą, ustawiając właściwość innerHTML o table elementów lub sekcji tabeli elementu (jak tbody lub thead) nie działa w Internet Explorer (Edit: Właśnie sprawdziłem - z ietester i zwykłego IE8 Rezultatem jest "nieznany błąd środowiska wykonawczego" dla IE6 i IE8, co powoduje awarię IE7, ale może to być problem specyficzny dla IEtestera).

DOM standard sposób dodawania wiersze tabeli korzysta z metody insertRow() na elemencie tabeli lub sekcji Tabela (patrz na HTMLTableElement i HTMLTableSectionElement w tym DOM specyfikacji)

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

W skrypcie jest nie jest tworzona jawna sekcja tabeli. AFAIK, automatycznie tworzy się TBODY i wstawia tam wiersze.

EDYCJA: w odniesieniu do IE, powinienem zaznaczyć, że można dodać tabelę z zawartością i wszystko, ustawiając właściwość innerHTML, ale wstawiony tam html musi być kompletną tabelą. Więc to działa, nawet w 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> 
+0

Tak, faktycznie, to rzuca błąd runtime! Powinniśmy przejść tą metodą lub tradycyjnie tworzyć/dodawać cykle dla wszystkich tbody, tr i td. – vpram86

+2

+1 Prawidłowo na wszystkich kontach. 'innerHTML' jest tylko do odczytu dla' table' i 'tbody' w IE. –

+0

ya, tbody nie działa w IE. Ale kod, który podałeś, również nie działa ... – yeeen

Powiązane problemy