Problemas con DOM en IE

Josepepe033 · #1 (**permalink**) 05/12/2010, 11:24

Cuando, por ejemplo, quiero modificar mediante DOM el contenido de una tabla de la siguiente forma:

Código:

document.getElementsByTagName('table')[3].innerHTML = "Lo que sea";

Los resultados se ven en cualquier navegador excepto en Internet Explorer, ¿qué debo poner para que funcione en IE también?

Solo me permite modificar las tablas cuando accedo a ellas por Id, si es por TagName o ClassName ya no funciona.

Panino5001 · #2 (**permalink**) 05/12/2010, 11:39

Asegurate de intentarlo una vez que el DOM haya cargado.Para eso podés usar el evento onload o colocar tu script luego de la tabla.
Además asegurate de escribir un html que sea adecuado a la estructura de una tabla html ("lo que sea" no es una estructura adecuada para colocar entre nodos table).

Josepepe033 · #3 (**permalink**) 05/12/2010, 11:46

Sí, la tabla carga antes que el DOM, y el contenido que hay dentro también es correcto, coloco las TRs y los TDs; pero en IE sigue dando error.

Gracias.

Panino5001 · #4 (**permalink**) 05/12/2010, 11:54

Ya veo (no conocía este bug de Explorer). Te tocará usar DOM en explorer o envolver la tabla en un tag div y trabajar con su innerHTML.

zerokilled · #5 (**permalink**) 05/12/2010, 11:55

iexplorer lanza el mensaje unknown runtime error cuando usas innerHTML en cualquier estructura de la tabla excepto en ciertos elementos como TH y TD. en la documentacion oficial puedes leer lo que cita acerca de innerHTML.

Cita:

Iniciado por http://msdn.microsoft.com/en-us/library/ms533897(v=VS.85).aspx

The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value.

Josepepe033 · #6 (**permalink**) 05/12/2010, 12:13

Entonces, si lo que hago es localizar la tabla, crear un tr y luego un td (sin tocar el innerHTML), ¿si podría modificar el contenido del td?

caricatos · #7 (**permalink**) 05/12/2010, 12:16

Hola:

Tal vez poniendo la estructura correcta en la tabla...

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
	http://www.caricatos.net/probador
</title>
<script type="text/javascript">
function poner() {
 document.getElementsByTagName("table")[0].innerHTML = "<tbody><th><td>veremos</td></th></tbody>";
}
window.onload = poner;
</script>
</head>
<body>
<table><th><td>hola</td></th></table>
</body>
</html>

En la versión 9 funciona.

Saludos

Josepepe033 · #8 (**permalink**) 05/12/2010, 12:25

Nada, tampoco funciona (en IE 8) ese código, Caricatos.

caricatos · #9 (**permalink**) 05/12/2010, 12:29

Hola:

Al final, solo puede haber contenido de texto en los td, th, caption (y no recuerdo más...), pero si piensas generar la estructura con el DOM, acuérdate que detrás del tag table debes poner tbody, tfoot o thead.

Saludos

Josepepe033 · #10 (**permalink**) 05/12/2010, 12:33

Ok, gracias. ;)

enrique4480 · #11 (**permalink**) 05/12/2010, 13:24

prueba esto:

Código Javascript:

Ver originalvar t = document.getElementsByTagName('table')[0].childNodes[1];
alert(t.innerHTML);

te tiene que mostrar en el alert todo el html de la tabla (los tr td etc). si asi te funciona solo tienes que recorrer los nodos y listo.

PD: el primer codigo se me fue y lo puse mal :). si este no te funcionase dimelo y te pongo otro que acabo de hacer que funciona en explorer y en los otros.

Josepepe033 · #12 (**permalink**) 05/12/2010, 13:53

No funciona, probemos con el otro. >.<

enrique4480 · #13 (**permalink**) 05/12/2010, 14:01

Código Javascript:

Ver originalvar t = document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0].rows;
alert(t.item(0).innerHTML);

este lo acabo de probar en IE8,chrome,firefox y safari. no te da todo el html de la tabla, pero si de la fila. tb en las pruebas solo tengo una tabla aumenta los indices para la que te corresponda.

Josepepe033 · #14 (**permalink**) 05/12/2010, 14:20

Este si funciona, ¿qué hago ahora con esto?

Gracias. ;)

enrique4480 · #15 (**permalink**) 05/12/2010, 14:25

obtienes el nodelist con t.item(indice).childNodes, y puedes recorrar la tabla entera. lo unico que he notado es que IE los indices empiezan por 1 y en los demas por 0, pero eso se soluciona facil detectando el navegador se incremente en 1 y listo. yo ahora voy a cenar, luego mas tarde te dejare un codigo completo que modifique cada campo de una pequeña tabla para que de ahi lo adaptes a lo que necesites.

Josepepe033 · #16 (**permalink**) 05/12/2010, 14:31

Ah, gracias. Lo espero. ;)

zerokilled · #17 (**permalink**) 05/12/2010, 14:48

@enrique, @josepepe:

la solución puede ser bien versátil dependiendo de la estructrua de la tabla. lamentablemente no hay forma en iexplorer (con excepción de la 9 según nos comenta @caricatos) que se pueda usar innerHTML en los elementos antes indicados: TBODY, THEAD, TFOOT, TABLE, TR. lo que si puedes hacer es crear una tabla desde su más profunda entrañas. es decir, desde un contendor creas la tabla.

Código:

// html ;
<div id="container"></div>

// javascript ;
document.getElementById('container').innerHTML = "<table><tr><td>cell</td></tr></table>";

por supuesto, esta alternativa no es cómoda si lo que se intenta es modificar una celda o fila. la otra alternativa es acceder con DOM a cada una de las celdas necesarias. la ruta del DOM varia dependiendo de la estructura de la tabla. es decir, si existe la presencia de TFOOT, THEAD, o más de un TBODY.

Código:

// asumiendo que table es la referencia a una tabla ;
table.rows[0].cells[0]; 
/* primera celda de primera fila. la fila a presentar en rows[0]
   no se toma en cuenta si la seccion es THEAD, TBODY ni TFOOT.
   es decir, es en relacion en orden de aparicion referente 
   al elemento TABLE.
*/

table.tBodies[0].rows[0].cells[0];
// primera celda de la primera fila en relacion al primer TBODY de la tabla ;

table.tHead.rows[0].cells[0]; 
// primera celda de la primera fila en relacion a THEAD ;

@enrique, con la alternativa de item o childNodes hay que tener mucho cuidado puesto que los TextNode tambien son nodos. sin embargo, en iexplorer el asunto es un tanto distinto, el navegador no crea TextNode cuando este consiste de caracteres en blanco (white-character: space, linefeed, new line, entre otros).

enrique4480 · #18 (**permalink**) 05/12/2010, 16:07

zerokilled tome en cuenta lo de los textNode en IE, esta claro que no es comodo, pero de momento para solventar lo de compatible con IE y los demas asi funciona:

Código Javascript:

Ver originalvar t = document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0].rows;
 
 for(x=0;x<t.length;x++)
 {
  if(t.item(x).innerHTML!="undefined")
  {
   alert(t.item(x).innerHTML); 
  } 
 }

se puede mejorar y mirar con hasNodes y accer uno a uno a cada celda etc, ese codigo lo he probado con una tabla pequeña y aun sin estar pulido funciona en todos los navegadores.

josepepe te queda a ti solo el verificar si hay mas nodos y recorrerlos.

Josepepe033 · #19 (**permalink**) 05/12/2010, 18:13

Gracias. ;) Ya más o menos lo voy encaminando.