tabla no se ve en IE pero en Firefox si...ayuda ¡¡¡

magamo · #1 (**permalink**) 04/10/2006, 14:28

Tengo el siguiente problema, al crear una tabla dinamica, esta si es mostrada en Firefox pero en Internet Explorer no, el codigo es el siguiente, alguien me puede ayudar por favor.... gracias

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title></title>
<script>
function crear_tabla(){
var x=document.getElementById('cuerpo');
var tabla = document.createElement("table");
tabla.setAttribute("border","1");
tabla.setAttribute("width","400");
tabla.setAttribute("cellpadding","0");
tabla.setAttribute("cellspacing","0");
var fila = document.createElement("TR");
var celda1 = document.createElement("TD");
celda1.setAttribute("width","10%");
celda1.innerHTML="actividades uno";
var celda2 = document.createElement("TD");
celda2.setAttribute("width","50%");
celda2.innerHTML="actividades dos";
var celda3 = document.createElement("TD");
celda3.setAttribute("width","10%");
celda3.innerHTML="actividades tres";
var celda4 = document.createElement("TD");
celda4.setAttribute("width","20%");
celda4.innerHTML="actividades cuatro";
var celda5 = document.createElement("TD");
celda5.setAttribute("width","10%");
celda5.innerHTML="actividades cinco";

fila.appendChild(celda1);
fila.appendChild(celda2);
fila.appendChild(celda3);
fila.appendChild(celda4);
fila.appendChild(celda5);

tabla.appendChild(fila);
x.appendChild(tabla);
}

function creatabla(){
obj=document.getElementById('contenedor');
obj.innerHTML="<table><tr><td>prueba</td></tr></table>";
}
</script>
</head>
<body id="cuerpo">
<div id="contenedor"></div>
<input type="button" onclick="crear_tabla();" value="crea tabla">
</body>
</html>

el_javi · #2 (**permalink**) 04/10/2006, 14:57

Hola a todos.

He ido a postear un problema que tengo y da la casualidad que me da el mismo error que a nuestr@ compañer@ magamo

Mi código de creación de la tabla es el siguiente

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 
<html> 
<head> 
    <title>Dynamic TAble</title> 
    <script language="JavaScript1.2" type="text/javascript"> 
        function createTable () 
        { 
            var tableContainer = document.createElement("table"); 
            tableContainer.border = 1; 
            tableContainer.cellPadding = 0; 
            tableContainer.cellSpacing = 0; 
            tableContainer.bgColor = "red"; 
             
            var tableContent_tr = document.createElement("tr"); 
            var tableContent_td = document.createElement("td"); 
            tableContent_td.innerHTML = "Lo creo yo"; 
             
             
            tableContent_tr.appendChild (tableContent_td); 
            tableContainer.appendChild (tableContent_tr); 
             
            document.body.appendChild (tableContainer); 
 
            document.getElementById("miCapa").appendChild (tableContainer); 
        } 
    </script> 
</head> 
 
<body> 
 
<a href="javascript:createTable()">Crear Tabla</a><br> 
<br> 
<br> 
<br> 
<br> 
<div id="miCapa"></div> 
 
 
 
</body> 
</html>

Espero que alguien pueda ayudarnos a los dos.

Cap.Buscapina · #3 (**permalink**) 04/10/2006, 16:21

en ambos casos el problema es que IE necesita que se cree la etiqueta <tbody> para que se vean los resultados. (he visto ya varios post que refieren a este problema.

quedaría algo así:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Dynamic TAble</title>
<script language="JavaScript1.2" type="text/javascript">
function createTable ()
{
var tableContainer = document.createElement("table");
var tableContainerTbody = document.createElement("tbody");
tableContainer.border = 1;
tableContainer.cellPadding = 0;
tableContainer.cellSpacing = 0;
tableContainer.bgColor = "red";

var tableContent_tr = document.createElement("tr");
var tableContent_td = document.createElement("td");
tableContent_td.innerHTML = "Lo creo yo";

tableContent_tr.appendChild (tableContent_td);
tableContainerTbody.appendChild(tableContent_tr)
tableContainer.appendChild (tableContainerTbody);

document.body.appendChild (tableContainer);

document.getElementById("miCapa").appendChild (tableContainer);

}
</script>
</head>

<body>

<a href="javascript:createTable()">Crear Tabla</a><br>
<br>
<br>
<br>
<br>
<div id="miCapa"></div>

</body>
</html>

saludos

el_javi · #4 (**permalink**) 04/10/2006, 17:25

Nuevamente quiero dar mi gran enhorabuena a todos vosotros... esque sois la caña....

Esa es la solución, funciona correctamente (no es que lo pusiera en duda Cap.Buscapina, pero debía de comprobarlo...)

Ya es tarde para seguir trabajando, asi que mañana continuaré con mi desarrollo, y te contaré si ha evolucionado bien con tu solición.

Mil gracias a tod@s.

frijolerou · #5 (**permalink**) 04/10/2006, 20:32

Un consejo amigo magamo (además de lo del TBODY que mencionaron anteriormente). En tu ejemplo estás creando 5 celdas, y cada celda la creas mediante createElement(). Es mucho más óptimo que utilices createelement() para crear una sola celda, y que después la vayas clonando:

Código:

celda1 = document.createElement("TD");
celda2 = celda1.cloneNode(false);
celda3 = celda1.cloneNode(false);
celda4 = celda1.cloneNode(false);
celda5 = celda1.clonenode(false);

el_javi · #6 (**permalink**) 05/10/2006, 15:55

Buenas noches de nuevo a tod@s.

Tengo una pregunta para frijolerou:

¿Porqué es recomentable usar celda2 = celda1.cloneNode(false); en vez de celda2 = document.createElement('td');?

Me gustaría saber porque das esa recomendación.. dado que no lo se ni encuentro una respuesta muy lógica.

Un saludo