esconder y mostrar seccion

[marcelocuiza_de]

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:

<table>
 <tr>
      <td>TITULO</td>
      <td><a href="#" onclick="hideSection()">esconder</a></td>
 </tr>
<!-- area que debe esconderse y mostrarse -->
 <tr>
      <td>contenido</td>
      <td>contenido</td>
 </tr>
 <tr>
      <td>contenido</td>
      <td>contenido</td>
 </tr>
 <tr>
      <td>contenido</td>
      <td>contenido</td>
 </tr>
<!--fin area que debe esconderse y mostrarse -->
</table>
 

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

ayuda

[David]

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

[chwc]

haz asi, imaginate que tu tabla tiene un id, digamos #ejemplodeid
entonces, al ejecutar

Código Javascript:

hideSection('ejemplodeid')
 

, con una funcion un poco asi

Código Javascript:

function hideSection(id){
var elemento = document.getElementById(id); // obtener tabla
var elementos = elemento.getElementsByTagName('tr'); // obtener todos los tr de la tabla
elementos.reverse() // dar vuelta elementos
elementos.pop() // eliminar el ultimo elemento, el cual seria el primero
for(x in elementos){
elementos[x].style.display = 'none' // por cada elemento, ocultar
}
}
 

[David]

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

En todo caso esto:

Iniciado por chwc

Código Javascript:

elementos.reverse() // dar vuelta elementos
elementos.pop() // eliminar el ultimo elemento, el cual seria el primero
 

También podría ser directamente:

Código Javascript:

elementos.shift();
 

Aunque hay que tener en cuenta que getElementsByTagName no devuelve un array como tal.

Saludos.

[chwc]

Iniciado por David

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:

elementos.shift()
for(x in elementos){
elementos[x].style.display = 'none' // por cada elemento, ocultar
}
 

lo hacemos a la antigua

Código Javascript:

for(var x = 1;x < elementos.length;x++){
elementos[x].style.display = 'none' // por cada elemento, ocultar
}
 

un saludo !

[caricatos]

Hola:

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

Saludos

[marcelocuiza_de]

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:

for(var x = 1;x < elementos.length;x++){
var idInput = elementos[x].firstChild.nextSibling.childNodes[1].firstChild.id; // aqui intento obtener el id del input
alert('id del input : '+ idInput);
elementos[x].style.display = 'none' 
}
 

Código HTML:

<table>
 <tr>
      <td>TITULO</td>
      <td><a href="#" onclick="hideSection()">esconder</a></td>
 </tr>
<!-- area que debe esconderse y mostrarse -->
 <tr>
      <td><label>contenido</label></td>
      <td><input type="text" id="uno" /></td>
 </tr>
 <tr>
      <td><label>contenido</label></td>
      <td><input type="text" id="dos" /></td>
 </tr>
 <tr>
      <td><label>contenido</label></td>
      <td><input type="text" id="tres" /></td>
 </tr>
<!--fin area que debe esconderse y mostrarse -->
</table>
 

[chwc]

Hola ! mira, esta linea

Código Javascript:

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

<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:

var idInput = elementos[x].childNodes[3]
 

pero el elemento sería este

Código HTML:

<td><input type="text" id="uno" /></td>
 

de ahí usariamos el unico hijo que tiene

Código Javascript:

var idInput = elementos[x].childNodes[3].childNodes[0]
 

y ahí que tenemos el elemento, sacamos el ID

Código Javascript:

var idInput = elementos[x].childNodes[3].childNodes[0].id;
 

un saludo, y espero que me hayas entendido

[David]

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.

[marcelocuiza_de]

chwc, entiendo, pero aun asi no me funciona con:

Código Javascript:

var idInput = elementos[x].childNodes[3].childNodes[0].id;
 

alguna otra sugerencia porfa!!!

[chwc]

Utiliza la idea de David, mediante getElementsByTagName("input")

Código Javascript:

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