Foros del Web » Creando para Internet » HTML »

Tablas dentro de Tablas con innerHTML

Estas en el tema de Tablas dentro de Tablas con innerHTML en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/11/2004, 09:24
Avatar de Laocoont  
Fecha de Ingreso: noviembre-2004
Ubicación: Lleida
Mensajes: 26
Antigüedad: 13 años
Puntos: 0
Exclamación Tablas dentro de Tablas con innerHTML

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!
__________________
Me gusta aprender porque aprendiendo me siento vivo :pirata: El Racó del Mestre
[email protected]
  #2 (permalink)  
Antiguo 28/11/2004, 12:18
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 28/11/2004, 14:21
Avatar de Laocoont  
Fecha de Ingreso: noviembre-2004
Ubicación: Lleida
Mensajes: 26
Antigüedad: 13 años
Puntos: 0
Nuevo problema!!

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é!
__________________
Me gusta aprender porque aprendiendo me siento vivo :pirata: El Racó del Mestre
[email protected]
  #4 (permalink)  
Antiguo 28/11/2004, 14:59
Avatar de Laocoont  
Fecha de Ingreso: noviembre-2004
Ubicación: Lleida
Mensajes: 26
Antigüedad: 13 años
Puntos: 0
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!
__________________
Me gusta aprender porque aprendiendo me siento vivo :pirata: El Racó del Mestre
[email protected]
  #5 (permalink)  
Antiguo 28/11/2004, 16:34
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 28/11/2004, 17:54
Avatar de Laocoont  
Fecha de Ingreso: noviembre-2004
Ubicación: Lleida
Mensajes: 26
Antigüedad: 13 años
Puntos: 0
Sobre el último mensaje!!

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!!
__________________
Me gusta aprender porque aprendiendo me siento vivo :pirata: El Racó del Mestre
[email protected]
  #7 (permalink)  
Antiguo 29/11/2004, 04:39
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #8 (permalink)  
Antiguo 29/11/2004, 04:50
Avatar de Laocoont  
Fecha de Ingreso: noviembre-2004
Ubicación: Lleida
Mensajes: 26
Antigüedad: 13 años
Puntos: 0
Sobre el IFRAME oculto

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?
__________________
Me gusta aprender porque aprendiendo me siento vivo :pirata: El Racó del Mestre
[email protected]
  #9 (permalink)  
Antiguo 29/11/2004, 05:10
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #10 (permalink)  
Antiguo 29/11/2004, 05:19
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
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,
  #11 (permalink)  
Antiguo 29/11/2004, 05:33
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #12 (permalink)  
Antiguo 29/11/2004, 06:20
Avatar de Laocoont  
Fecha de Ingreso: noviembre-2004
Ubicación: Lleida
Mensajes: 26
Antigüedad: 13 años
Puntos: 0
Muchas gracias!

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!
__________________
Me gusta aprender porque aprendiendo me siento vivo :pirata: El Racó del Mestre
[email protected]
  #13 (permalink)  
Antiguo 29/11/2004, 06:40
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
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><!-- todas las tablas del documento se muestran con letras azules -->

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"><!-- las tablas con class="tabla" tiene las letras rojas -->

O según el atributo id y con # por delante
#miTabla { color: yellow;}
<table id="miTabla"><!-- esta tabla tiene las letras amarillas -->

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

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #14 (permalink)  
Antiguo 29/11/2004, 06:59
Avatar de Laocoont  
Fecha de Ingreso: noviembre-2004
Ubicación: Lleida
Mensajes: 26
Antigüedad: 13 años
Puntos: 0
No si eso ya lo he supuesto en la misma pregunta!

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!!!
__________________
Me gusta aprender porque aprendiendo me siento vivo :pirata: El Racó del Mestre
[email protected]
  #15 (permalink)  
Antiguo 18/05/2005, 18:39
Avatar de erickroco  
Fecha de Ingreso: mayo-2005
Ubicación: México
Mensajes: 3
Antigüedad: 12 años, 6 meses
Puntos: 0
Hola a todos:

He leído los mensajes que están en este Foro.

Mira lo que yo quiero hacer es lo siguiente:

Hacer una página que me contenga una tabla de ventas. Dentro de esta tabla hay ciertos rubros principales (Filas principales) por ejemplo:

|Ventas de Ciudad|1150$|
|Ventas del Interior|2000$
|Totales Generales|3150$|

Lo que quiero es que al presionar sobre la fila de Ventas de Ciudad se me despliegue su detalle sin tener que refrescar o recargar la página nuevamente para hacer esta consulta, es decir...

Al presionar click...
|Ventas de Ciudad|1150$|
|Tienda1 |1000$| y las celdas de abajo tengan el efecto de recorrerse.
|Tienda2 | 150$|
|Ventas del Interior|2000$
|Totales Generales|3150$|

La tecnología que estoy utilizando es ASP.NEt..

Muchas gracias.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:07.