Foros del Web » Programando para Internet » Javascript »

esconder y mostrar seccion

Estas en el tema de esconder y mostrar seccion en el foro de Javascript en Foros del Web. porfa si alguien me puede ayudar, necesito esconder una seccion y volver a mostrarla a traves de un evento click, bajo la siguiente estructura: @import ...
  #1 (permalink)  
Antiguo 15/04/2013, 17:00
 
Fecha de Ingreso: abril-2013
Mensajes: 60
Antigüedad: 6 años, 8 meses
Puntos: 2
esconder y mostrar seccion

porfa si alguien me puede ayudar, necesito esconder una seccion y volver a mostrarla a traves de un evento click, bajo la siguiente estructura:

Código HTML:
Ver original
  1.  <tr>
  2.       <td>TITULO</td>
  3.       <td><a href="#" onclick="hideSection()">esconder</a></td>
  4.  </tr>
  5. <!-- area que debe esconderse y mostrarse -->
  6.  <tr>
  7.       <td>contenido</td>
  8.       <td>contenido</td>
  9.  </tr>
  10.  <tr>
  11.       <td>contenido</td>
  12.       <td>contenido</td>
  13.  </tr>
  14.  <tr>
  15.       <td>contenido</td>
  16.       <td>contenido</td>
  17.  </tr>
  18. <!--fin area que debe esconderse y mostrarse -->

como puedo esconder todos los "tr" de una tabla a excepción de uno, es decir ocultar todos menos el primero..

ayuda
  #2 (permalink)  
Antiguo 15/04/2013, 17:05
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.712
Antigüedad: 14 años, 7 meses
Puntos: 836
Respuesta: esconder y mostrar seccion

Semánticamente el primero sería un <th> en lugar de un <tr>
Puedes usar getElementsByTagName() para recorrer todas las filas (a excepción del primero que contiene el título) y agregarles el estilo display:none
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 15/04/2013, 17:12
Avatar de chwc  
Fecha de Ingreso: julio-2008
Ubicación: Buenos Aires ! :D
Mensajes: 814
Antigüedad: 11 años, 4 meses
Puntos: 103
Respuesta: esconder y mostrar seccion

haz asi, imaginate que tu tabla tiene un id, digamos #ejemplodeid
entonces, al ejecutar
Código Javascript:
Ver original
  1. hideSection('ejemplodeid')
, con una funcion un poco asi
Código Javascript:
Ver original
  1. function hideSection(id){
  2. var elemento = document.getElementById(id); // obtener tabla
  3. var elementos = elemento.getElementsByTagName('tr'); // obtener todos los tr de la tabla
  4. elementos.reverse() // dar vuelta elementos
  5. elementos.pop() // eliminar el ultimo elemento, el cual seria el primero
  6. for(x in elementos){
  7. elementos[x].style.display = 'none' // por cada elemento, ocultar
  8. }
  9. }
  #4 (permalink)  
Antiguo 15/04/2013, 17:22
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.712
Antigüedad: 14 años, 7 meses
Puntos: 836
Respuesta: esconder y mostrar seccion

Exacto, buen ejemplo, a eso me refería.

En todo caso esto:
Cita:
Iniciado por chwc Ver Mensaje
Código Javascript:
Ver original
  1. elementos.reverse() // dar vuelta elementos
  2. elementos.pop() // eliminar el ultimo elemento, el cual seria el primero
También podría ser directamente:
Código Javascript:
Ver original
  1. elementos.shift();
Aunque hay que tener en cuenta que getElementsByTagName no devuelve un array como tal.

Saludos.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #5 (permalink)  
Antiguo 15/04/2013, 18:00
Avatar de chwc  
Fecha de Ingreso: julio-2008
Ubicación: Buenos Aires ! :D
Mensajes: 814
Antigüedad: 11 años, 4 meses
Puntos: 103
Respuesta: esconder y mostrar seccion

Cita:
Iniciado por David Ver Mensaje
Aunque hay que tener en cuenta que getElementsByTagName no devuelve un array como tal.
TypeError: Object #<NodeList> has no method 'reverse'

mmm... me tira ese error, es verdad, no es un array en si.

bien en ese caso, habra que tratarlo como un Array sin metodos

en vez de

Código Javascript:
Ver original
  1. elementos.shift()
  2. for(x in elementos){
  3. elementos[x].style.display = 'none' // por cada elemento, ocultar
  4. }

lo hacemos a la antigua

Código Javascript:
Ver original
  1. for(var x = 1;x < elementos.length;x++){
  2. elementos[x].style.display = 'none' // por cada elemento, ocultar
  3. }


un saludo !
  #6 (permalink)  
Antiguo 15/04/2013, 18:15
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.596
Antigüedad: 17 años, 8 meses
Puntos: 1277
Respuesta: esconder y mostrar seccion

Hola:

También se pueden poner varios elementos tbody (para el caso podrían ser solo dos (2)... sería fácil agruparlos.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 16/04/2013, 10:26
 
Fecha de Ingreso: abril-2013
Mensajes: 60
Antigüedad: 6 años, 8 meses
Puntos: 2
Respuesta: esconder y mostrar seccion

me funciono, pero ahora necesito obtener el id de un elemento dentro un tr, mas especificamente el id del input text, por cada fila..

pensaba al momento de recorrer la tabla fila a fila obtener el id del input mediante nodos, pero no me funciona...

Código Javascript:
Ver original
  1. for(var x = 1;x < elementos.length;x++){
  2. var idInput = elementos[x].firstChild.nextSibling.childNodes[1].firstChild.id; // aqui intento obtener el id del input
  3. alert('id del input : '+ idInput);
  4. elementos[x].style.display = 'none'
  5. }


Código HTML:
Ver original
  1.  <tr>
  2.       <td>TITULO</td>
  3.       <td><a href="#" onclick="hideSection()">esconder</a></td>
  4.  </tr>
  5. <!-- area que debe esconderse y mostrarse -->
  6.  <tr>
  7.       <td><label>contenido</label></td>
  8.       <td><input type="text" id="uno" /></td>
  9.  </tr>
  10.  <tr>
  11.       <td><label>contenido</label></td>
  12.       <td><input type="text" id="dos" /></td>
  13.  </tr>
  14.  <tr>
  15.       <td><label>contenido</label></td>
  16.       <td><input type="text" id="tres" /></td>
  17.  </tr>
  18. <!--fin area que debe esconderse y mostrarse -->
  #8 (permalink)  
Antiguo 16/04/2013, 11:07
Avatar de chwc  
Fecha de Ingreso: julio-2008
Ubicación: Buenos Aires ! :D
Mensajes: 814
Antigüedad: 11 años, 4 meses
Puntos: 103
Respuesta: esconder y mostrar seccion

Hola ! mira, esta linea
Código Javascript:
Ver original
  1. var idInput = elementos[x].firstChild.nextSibling.childNodes[1].firstChild.id; // aqui intento obtener el id del input
creo que esta un poco errada,
ya que los child nodes de un elemento asi
Cita:
<tr>
<td><label>contenido</label></td>
<td><input type="text" id="uno" /></td>
</tr>
se resumiria en,
[ #text, <td>, #text, <td>, #text ]
entonces quedaría
Código Javascript:
Ver original
  1. var idInput = elementos[x].childNodes[3]
pero el elemento sería este
Código HTML:
Ver original
  1. <td><input type="text" id="uno" /></td>
de ahí usariamos el unico hijo que tiene
Código Javascript:
Ver original
  1. var idInput = elementos[x].childNodes[3].childNodes[0]
y ahí que tenemos el elemento, sacamos el ID
Código Javascript:
Ver original
  1. var idInput = elementos[x].childNodes[3].childNodes[0].id;

un saludo, y espero que me hayas entendido
  #9 (permalink)  
Antiguo 16/04/2013, 11:58
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.712
Antigüedad: 14 años, 7 meses
Puntos: 836
Respuesta: esconder y mostrar seccion

Yo por si acaso volvería a usar getElementsByTagName("input")
Ya que ir por el número de nodos es un poco frágil, además que no todos los navegadores interpretan de la misma forma ciertos nodos de texto.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #10 (permalink)  
Antiguo 16/04/2013, 16:48
 
Fecha de Ingreso: abril-2013
Mensajes: 60
Antigüedad: 6 años, 8 meses
Puntos: 2
Respuesta: esconder y mostrar seccion

chwc, entiendo, pero aun asi no me funciona con:
Código Javascript:
Ver original
  1. var idInput = elementos[x].childNodes[3].childNodes[0].id;

alguna otra sugerencia porfa!!!
  #11 (permalink)  
Antiguo 16/04/2013, 17:08
Avatar de chwc  
Fecha de Ingreso: julio-2008
Ubicación: Buenos Aires ! :D
Mensajes: 814
Antigüedad: 11 años, 4 meses
Puntos: 103
Respuesta: esconder y mostrar seccion

Utiliza la idea de David, mediante getElementsByTagName("input")
Código Javascript:
Ver original
  1. var idInput = elementos[x].getElementsByTagName("input")[0].id;

no queria ser tan repetitivo, asi que use los childNodes para el otro ejemplo, pero el DOM tiene tantas formas de acceder a los elementos !

y otra cosa, para aprender facilmente, te recomiendo que aprendas a usar las consolas de los navegadores web, Chrome tiene una excelente consola y firefox tiene unas herramientas increibles.

un saludo

Etiquetas: esconder, seccion
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 16:09.