¿Cómo se usa createElement para crear una nueva tabla?

¿Por qué el siguiente código no funciona?¿Cómo se usa createElement para crear una nueva tabla?

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

Fuente

2010-02-24 yeeen

A lo mejor de mi conocimiento, establecer la propiedad innerHTML de un elemento table elemento o sección de la tabla (como tbody o thead) no funciona en Internet Explorer (EDIT: Acabo de comprobar - con ietester y sencillo IE8 El resultado es "error de tiempo de ejecución desconocido" para IE6 e IE8, y bloquea IE7, pero eso podría ser un problema específico de IEtester).

La forma DOM standard de añadir filas a una tabla se utiliza el método insertRow() en un elemento de la tabla o sección de la tabla (busque HTMLTableElement y HTMLTableSectionElement en esa especificación 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>

En el guión, hay no se ha creado una sección de tabla explícita. AFAIK, se crea automáticamente un TBODY y las filas se insertan allí.

EDITAR: con respecto a IE, debo señalar que puede agregar una tabla con contenido y todo configurando la propiedad innerHTML, pero el html que inserte allí debe ser una tabla completa. Así que esto funciona, incluso en 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>

Fuente

2010-02-24 09:18:01

Sí, de hecho, arroja un error de tiempo de ejecución! Deberíamos seguir este método, o ciclos tradicionales de creación/adición para todos los tbody, tr y td. – vpram86

+1 Corregir en todas las cuentas. 'innerHTML' es de solo lectura para' table' y 'tbody' en IE. –

ya, tbody no funciona en IE. Pero el código que usó tampoco parece funcionar ... – yeeen

¿Cómo se usa createElement para crear una nueva tabla?

Respuesta

Cuestiones relacionadas