Tablas dentro de Tablas con innerHTML

Laocoont · #1 (**permalink**) 28/11/2004, 09:24

Tengo una duda, estoy creando una página web donde el marco general está hecho por tablas, esta es la dirección:

http://es.geocities.com/ddel_olmo/index.html

Mi duda viene el como hacer que se cree unas tablas al elegir un tipo de menus y que los cargue dentro de una zona especifica de la tabla.

Hace tiempo realicé una página similar pero modificaba la capa <DIV> desde un
<SELECT> en concreto modificaba el idioma de la capa según la opción que cogiera, esto lo hacia la opción innerHTML.text='blablabla' peró no se como crear una tabla utilizando el inner.

También he leido que se puede hacer con IFRAME(s) i con una opción como el INCLUDE (en html? en JavaScript? en CSS?) si teneis ejemplos sobre estos últimos me gustaria ver-los.

Se podría llamar a un iFRAME desde la opción innerHTML (llamandola desde un onclick?)

Se que son muchas preguntas pero tb son muchas mis dudas!!

Un saludo!

caricatos · #2 (**permalink**) 28/11/2004, 12:18

Hola Laocoont, bienvenido a los foros

:

Puedes escribir tablas dentro de tablas, pero tienes que tener cuidado de escribir bien esa estructura y incluir la tabla dentro de una celda:
<td id="celda"></td>

y el scrpt:

document.getElementById("celda").innerHTML = "<table><tr><td>Celda</td></tr></table>";

No es necesario poner tbody porque se genera solo, pero si quieres usar thead o tfoot sí que tienes que definirlo...

Para poner contenidos en un iframe, debes poner en el atributo src la URL de una página, o usar el conjunto de frames (window.frames["laVentana"].location.href = '...') o escribir con un script
with (window.frames["laVentana"]) {
document.clear();
document.open();
document.write(contenido);
document.close();
}
Pero con este último método puedes encontrarte con que el navegador te deniegue el acceso a la página.

Saludos

Laocoont · #3 (**permalink**) 28/11/2004, 14:21

Ahora me surge otro problema si yo quiero posicionar las nuevas tablas creadas en el margen de arriba el màximo a la izq. posible como lo puedo hacer, ja que pruebo con poner dentro del <table valign='top'> i no me hace ni caso me sale en el medio (supongo porque tengo la td puesta en middle) pero me sale en medio de la celda y yo la quiero arriba.
La página es la que tengo en mi firma, ahora la actualizaré!

Laocoont · #4 (**permalink**) 28/11/2004, 14:59

Ya he solucionado lo de antes, grácias de todos modos!
Seguro que me surgiran nuevas dudas sobretodo a la hora de incluir un IFRAME mediante un innerHTML (aunque esta es la idea inicial se admiten otras opciones)

Lo dicho grácias!

caricatos · #5 (**permalink**) 28/11/2004, 16:34

Hola otra vez:

En ocasiones es conveniente poner los elementos directamente y con estilos mostrarlos u ocultarlos; con visibility: visible/hidden o display: inline/block/none.

Saludos

Laocoont · #6 (**permalink**) 28/11/2004, 17:54

Me gustaría que me aclararas a que te refieres en el último mensaje, ja que creo conocer los códigos de los que me hablas pero desconozco cual es la idea.
Yo había leido que el hecho de poner capas dinámicas, menus desplazables me podian dar conflicto con los demás navegadores (jo utilizo Ffox) y mi intención es que la página funcione para todos los demás.

La idea es que los siguientes links (Optimització del Rendiment xxxx) se cargue la página dentro de la celda anterior (donde habíamos creado otra tabla con el INNER) no se si entiendo tu idea bien o jo no me explico lo suficientemente claro!!

La verdad es que hace tiempo que busco darle un formato original a mi página (lo siguiente será modificar los bordres de las tablas para hacerlo mejor visualmente).

Saludos y muchísimas gracias!!

caricatos · #7 (**permalink**) 29/11/2004, 04:39

Hola otra vez:

Bueno, te aclararé el sentido del mensaje.
Por ejemplo, recuerdo que en la versión 6.xx (ne me acuerdo exactamente cual) de opera, con innerHTML se podía leer el contenido de los elementos de una página web, pero no permitía modificaciones...

con alert(elemento.innerHTML) mostraba correctamente el contenido de elemento, pero al intentar:
elemento.innerHTML = "contenido nuevo";
no pasaba absolutamente nada.

Las versiones actuales de la mayoría de navegadores funcionan bien, pero es difícil saber que pasará en el futuro. Incluso innerHTML no está definido en w3.org (aunque todos lo usamos).
De todos modos, lo que pienso más adecuado es poner desde un principio todos los elementos que con certeza serán usados en una página (tan solo se trata de mi humilde opinión, y seguramente haya mucha gente en desacuerdo conmigo)... O sea, si sabes que vas a usar el iframe, pero no te interesa mostrarlo desde el comienzo, puedes tener el tag en la página sin asignar el atributo src, para que no ralentice la carga de la página, y al necesitar usarlo, "mostrarlo" y "asignarle la URL"...

Pero insisto en que se trata de una opinión personal.

Saludos

Laocoont · #8 (**permalink**) 29/11/2004, 04:50

Pues según he entendido lo que me recomiendas es ocultar el IFRAME para luego mediante una funcion onclick lo muestre en la zona que yo quiero? (Hablo siempre basandome en mi página) I como sería eso?

Lo que yo pretendo es crear una navegación uni-pàgina, o sea desde una sola pàgina acceder a casi toda la información (de momento hasta que no aprenda PHP lo quiero a si) por lo que ahora pretendo cargar una pàgina dentro de la celda principal (lado derecho) de mi web. Eso de ocultar el IFRAME me ha gustado.....por cierto he leido por el foro que es mejor utilizar CSS que TABLE, yo el otro dia en un artículo web leí que las CSS pueden causar problemas de visualización (junto con las CAPAS) en ciertos navegadores...cual es tu opinión?

caricatos · #9 (**permalink**) 29/11/2004, 05:10

Hola otra vez:

No sé que decirte sobre "ponerlo en la zona que tú quieres", ya que de ser así, abría que complicar un poco más el script, pero básicamente puedes tener algo así:
<iframe src="" name="ventana" id="miVentana" style="display: none" width="400px" height="200px" ></iframe>

Y para usar el iframe utilizar un enlace normal, pero dando valeores al target y usando un simple script:
<a href="destino.html" target="ventana" onclick="document.getElementById('miVentana').styl e.display = 'block';" >mostrar enlace </a>

Sobre el tema css vs tablas: Yo defiendo el uso de tablas en estructuras tabulares... Incluso he puesto un mensaje en el foro css para obtener la presentación que tengo en mi galería de fotos sin usar tablas, y el número de respuestas ha sido un "0 (cero) patatero"...

Pero cada uno tiene sus ideas y sus formas de hacer las cosas... en el caso que te he comentado, después de unos pocos días sin encontrar una solución, decidí ser un defensor de las tablas en casos concretor.

Saludos

JavierB · #10 (**permalink**) 29/11/2004, 05:19

Hola Laocoont

He estado echando un vistazo a tu página y te voy a hacer una sugerencia que no tiene nada que ver con el tema que estás tratando con caricatos (¡Hola!

)

En las celdas pones:

onmouseover="this.style.backgroundColor='darkblue' ;this.style.color='blue';this.style.cursor='pointe r'" onmouseout="this.style.backgroundColor='blue';this .style.color='white';this.style.cursor='default'"

Esto lo puedes simplificar creando dos clases Css:

<style type="text/css">
.dentro {background-color:darkblue;color:blue;cursor:pointer}
.fuera {background-color:blue;color:white;cursor:default}
</style>

y luego en la celda solo tienes que poner:

Código HTML:

onmouseover="this.className='dentro'" onmouseout="this.className='fuera'"

Espero que te sirva. Saludos,

caricatos · #11 (**permalink**) 29/11/2004, 05:33

Hola Javi:

La verdad es que no me había fijado a fondo en la página, pero ya que se puede simplificar algo, se podría simplificar un poco más, omitiendo el cursor en las nuevas clases, y solo asignarlo a las celdas que lo necesiten...
Creo que no tiene sentido el estilo cursor cuando se asigna una clase en un evento onmouseout...

Saludos

Laocoont · #12 (**permalink**) 29/11/2004, 06:20

La verdad es que no había caido, bueno si que había caido pero mi nivel de CSS no es que sea para tirar cohetes. Por cierto en mi misma página puedo defidir la class de mi tabla aunque haya dos de manera general (o sea sin poner class a las tablas) o debo poner a cada tabla el mismo class i luego poner

.tabla{border-color:black;color:white;border:1px;}

De todos modos provaré a ver!! Repito muchas gràcias por todo!

caricatos · #13 (**permalink**) 29/11/2004, 06:40

Hola Laocoont:

Parece que necesitas darte una vueltita por ese foro:

Los estilos se pueden definir genéricos para etiquetas concretas como table, en tal caso no hay que poner el punto...

table { color: blue;}
<table>

O mediante una clase y se define con el punto y se usa el atributo class en la etiqueta que quieras que funcione.
.tabla { color: red;}
<table class="tabla">

O según el atributo id y con # por delante
#miTabla { color: yellow;}
<table id="miTabla">

Hay alguna opción más, pero cuando tengas dudas, anímate a plantearla en el foro adecuado.

Saludos

Laocoont · #14 (**permalink**) 29/11/2004, 06:59

La respuesta que me has dado (a parte de darte las gracias por la dedicación) ya me la he contestado a mi mismo finalmente he puesto una class a las 2 tablas y las definiré desde un style; ahora iré al foro CSS y haré un par de preguntas sobre como modificarlas!!!

Muchas, muchas, muchas gracias!!!

erickroco · #15 (**permalink**) 18/05/2005, 17:39