Comment utiliser createElement pour créer une nouvelle table?

Pourquoi le code suivant ne fonctionne pas?Comment utiliser createElement pour créer une nouvelle table?

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

Source

2010-02-24 yeeen

Au meilleur de ma connaissance, définissant la propriété innerHTML d'un élément d'élément table ou section de table (comme tbody ou thead) ne fonctionne pas sur Internet Explorer (EDIT: Je viens de vérifier - avec ietester et IE8 plaine Le résultat est "erreur d'exécution inconnue" pour IE6 et IE8, et il se bloque IE7, mais cela pourrait être un problème spécifique IEtester).

Le DOM standard moyen d'ajouter des lignes à une table est d'utiliser la méthode insertRow() sur un élément de tableau ou de section de table (comparer HTMLTableElement et HTMLTableSectionElement en ce que les spécifications de DOM):

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

Dans le script, il y a aucune section de table explicite en cours de création. AFAIK, un TBODY est automatiquement créé, et les lignes sont insérées là-dedans.

EDIT: en ce qui concerne IE, je tiens à souligner que vous pouvez ajouter une table avec le contenu et tout en définissant la propriété innerHTML, mais le code HTML que vous injectez doit contenir une table complète. Donc cela fonctionne, même sur 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>

Source

2010-02-24 09:18:01

Oui, En effet, il génère une erreur d'exécution! Nous devrions passer par cette méthode, ou créer/ajouter des cycles traditionnels pour tout tbody, tr et td. – vpram86

+1 Correct sur tous les comptes. 'innerHTML' est en lecture seule pour' table' et 'tbody' dans IE. –

ya, tbody ne fonctionne pas dans IE. Mais le code que vous avez donné ne semble pas fonctionner ... – yeeen

Comment utiliser createElement pour créer une nouvelle table?

Répondre

Questions connexes