Foros del Web » Creando para Internet » HTML »

Mostrar/Ocultar celdas

Estas en el tema de Mostrar/Ocultar celdas en el foro de HTML en Foros del Web. Saludos corillo: Estoy creando una tabla que necesito ocultar o mostrar el contenido en forma escalada. Ya lo logré de esta forma, pero me gustaría ...
  #1 (permalink)  
Antiguo 14/10/2010, 08:48
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Mostrar/Ocultar celdas

Saludos corillo:

Estoy creando una tabla que necesito ocultar o mostrar el contenido en forma escalada. Ya lo logré de esta forma, pero me gustaría saber si hay una mejor
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. td{ cursor: pointer; border: 1px solid #000; }
  4. .content td{ border: none; }
  5. <script type="text/javascript">
  6. function hideUnhideElement(id){
  7.     var thisElement = document.getElementById(id).style;
  8.     if(thisElement.display == 'none'){ thisElement.display = 'block'; }
  9.     else{ thisElement.display = 'none'; }
  10. }
  11. </head>
  12.     <tr>
  13.         <td onclick="hideUnhideElement('subCategoria[0]')">Categoria</td>
  14.         <td id="subCategoria[0]">
  15.             <table>
  16.                 <tr>
  17.                     <td onclick="hideUnhideElement('subSubCategoria[0]')">Sub categoria</td>
  18.                     <td id="subSubCategoria[0]">
  19.                         <table>
  20.                             <tr>
  21.                                 <td onclick="hideUnhideElement('contenido[0]')">Sub sub categoria</td>
  22.                                 <td id="contenido[0]">
  23.                                     <table class="content">
  24.                                         <tr>
  25.                                             <td>foo</td>
  26.                                             <td>bar</td>
  27.                                             <td>baz</td>
  28.                                             <td>candy</td>
  29.                                             <td>fruits</td>
  30.                                         </tr>
  31.                                     </table>
  32.                                 </td>
  33.                             </tr>
  34.                         </table>
  35.                     </td>
  36.                 </tr>
  37.             </table>
  38.         </td>
  39.     </tr>
  40.     <tr>
  41.         <td onclick="hideUnhideElement('subCategoria[1]')">Categoria</td>
  42.         <td id="subCategoria[1]">
  43.             <table>
  44.                 <tr>
  45.                     <td onclick="hideUnhideElement('subSubCategoria[1]')">Sub categoria</td>
  46.                     <td id="subSubCategoria[1]">
  47.                         <table>
  48.                             <tr>
  49.                                 <td onclick="hideUnhideElement('contenido[1]')">Sub sub categoria</td>
  50.                                 <td id="contenido[1]">
  51.                                     <table class="content">
  52.                                         <tr>
  53.                                             <td>foo</td>
  54.                                             <td>bar</td>
  55.                                             <td>baz</td>
  56.                                             <td>candy</td>
  57.                                             <td>fruits</td>
  58.                                         </tr>
  59.                                     </table>
  60.                                 </td>
  61.                             </tr>
  62.                         </table>
  63.                     </td>
  64.                 </tr>
  65.             </table>
  66.         </td>
  67.     </tr>
  68.     <tr>
  69.         <td onclick="hideUnhideElement('subCategoria[2]')">Categoria</td>
  70.         <td id="subCategoria[2]">
  71.             <table>
  72.                 <tr>
  73.                     <td onclick="hideUnhideElement('subSubCategoria[2]')">Sub categoria</td>
  74.                     <td id="subSubCategoria[2]">
  75.                         <table>
  76.                             <tr>
  77.                                 <td onclick="hideUnhideElement('contenido[2]')">Sub sub categoria</td>
  78.                                 <td id="contenido[2]">
  79.                                     <table class="content">
  80.                                         <tr>
  81.                                             <td>foo</td>
  82.                                             <td>bar</td>
  83.                                             <td>baz</td>
  84.                                             <td>candy</td>
  85.                                             <td>fruits</td>
  86.                                         </tr>
  87.                                     </table>
  88.                                 </td>
  89.                             </tr>
  90.                         </table>
  91.                     </td>
  92.                 </tr>
  93.             </table>
  94.         </td>
  95.     </tr>
  96. </body>
  97. </html>
Pulsen las primeras tres columnas y verán lo que hace, pero me gustaría saber si se puede hacer algo mejor que eso.
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #2 (permalink)  
Antiguo 14/10/2010, 09:14
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 6 meses
Puntos: 309
Respuesta: Mostrar/Ocultar celdas

Podrías hacerlo con DOM (creo que así funciona):
Código Javascript:
Ver original
  1. function hideUnhideElement(este){
  2.  este.style.display=este.style.display == 'none'?'block':'none';
  3. }
Código HTML:
Ver original
  1. <td onclick='hideUnhideElement(this.nextSibling);' ...>
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #3 (permalink)  
Antiguo 14/10/2010, 09:37
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: Mostrar/Ocultar celdas

Interesante, aunque es más corto, porque estas usando el operador ternario, es similar a lo que hice, pero me gusta la idea de DOM.
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #4 (permalink)  
Antiguo 14/10/2010, 17:25
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: Mostrar/Ocultar celdas

Lo hice como me indicaste pero en vez de solamente this.nextSibling, tenía que indicar que fuera el primer hijo, o sea this.nextSibling.firstChild. Muchas gracias me gusto esta forma Si alguien entiende que hay una mejor forma que no dude en decirlo
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #5 (permalink)  
Antiguo 14/10/2010, 18:30
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
Respuesta: Mostrar/Ocultar celdas

Hola:

Detallillos:

Tema de javascript (¿ o me lo parece... ?...

El display de las celdas no es block... tal vez: ¿table-cell?

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 14/10/2010, 21:58
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Mostrar/Ocultar celdas

¡buenas gente!

@abimael,
por los comentarios que haz dicho deduzco que te funcionó. ¿de casualidad eres amante de iexplorer? veras, lo digo porque tanto la propuesta de cronos como el arreglo que hiciste, no funciona en chrome/firefox. la explicación es bien sencilla. iexplorer no genera los nodos tipo Text cuando consiste de caracteres en blanco (whitespace) pero el resto de los navegadores los preserva. primero una ilustracion y luego los detalles.
Código:
       <td onclick="hideUnhideElement(this.nextSibling)">Categoria</td><!--
        --><td id="subCategoria[0]"><!--
            --><table><!--
                --><tr><!--
todo lo que esta dentro del comentario html son nodos Text. --><td ...
  • this.nextSibling en iexplorer representa el proximo elemento <td>. en los demas navegadores representa un nodo Text. la razon por la que presenta un nodo Text es por la estructura en que esta escrita el HTML. genera error porque los nodos Text no tienen propiedad style.
  • this.nextSibling.firstChild en iexplorer firstChild representaria el elemento <table>. en los demas navegadoes representa null porque es imposible que un nodo Text tenga elementos hijos. genera error porque style no es una propiedad de null.

en mozilla puedes leer un artículo que habla sobre ello y la solución a ese problema. lo único que haría diferente es definir un solo evento global para la tabla principal y con la ayuda del objeto event determinar en que elemento ocurrio el evento. de esta forma no tienes que definir varias veces el mismo evento en varios elementos.

__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.

Última edición por zerokilled; 14/10/2010 a las 22:08
  #7 (permalink)  
Antiguo 14/10/2010, 22:23
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: Mostrar/Ocultar celdas

@Caricatos, es verdad, pero me resulto . La verdad es que le hago al table un display none no al td.

@zerokilled, también tienes razón, solo que no me mencioné que la estructura es pegada que no trae el nodeType 3. Ya que este se crea cuando hay espacios entre un elemento. Otra forma como yo resolvi lo que indicas es colocando dos nextSibling y con ello se arregla el problema.

Gracias corillo
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos

Etiquetas: celdas
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 23:45.