Mostrar/Ocultar celdas

abimaelrc · #1 (**permalink**) 14/10/2010, 07:48

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
td{ cursor: pointer; border: 1px solid #000; }
.content td{ border: none; }
</style>
<script type="text/javascript">
function hideUnhideElement(id){
    var thisElement = document.getElementById(id).style;
    if(thisElement.display == 'none'){ thisElement.display = 'block'; }
    else{ thisElement.display = 'none'; }
}
</script>
</head>
<body>
<table>
    <tr>
        <td onclick="hideUnhideElement('subCategoria[0]')">Categoria</td>
        <td id="subCategoria[0]">
            <table>
                <tr>
                    <td onclick="hideUnhideElement('subSubCategoria[0]')">Sub categoria</td>
                    <td id="subSubCategoria[0]">
                        <table>
                            <tr>
                                <td onclick="hideUnhideElement('contenido[0]')">Sub sub categoria</td>
                                <td id="contenido[0]">
                                    <table class="content">
                                        <tr>
                                            <td>foo</td>
                                            <td>bar</td>
                                            <td>baz</td>
                                            <td>candy</td>
                                            <td>fruits</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td onclick="hideUnhideElement('subCategoria[1]')">Categoria</td>
        <td id="subCategoria[1]">
            <table>
                <tr>
                    <td onclick="hideUnhideElement('subSubCategoria[1]')">Sub categoria</td>
                    <td id="subSubCategoria[1]">
                        <table>
                            <tr>
                                <td onclick="hideUnhideElement('contenido[1]')">Sub sub categoria</td>
                                <td id="contenido[1]">
                                    <table class="content">
                                        <tr>
                                            <td>foo</td>
                                            <td>bar</td>
                                            <td>baz</td>
                                            <td>candy</td>
                                            <td>fruits</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td onclick="hideUnhideElement('subCategoria[2]')">Categoria</td>
        <td id="subCategoria[2]">
            <table>
                <tr>
                    <td onclick="hideUnhideElement('subSubCategoria[2]')">Sub categoria</td>
                    <td id="subSubCategoria[2]">
                        <table>
                            <tr>
                                <td onclick="hideUnhideElement('contenido[2]')">Sub sub categoria</td>
                                <td id="contenido[2]">
                                    <table class="content">
                                        <tr>
                                            <td>foo</td>
                                            <td>bar</td>
                                            <td>baz</td>
                                            <td>candy</td>
                                            <td>fruits</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</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.

_cronos2 · #2 (**permalink**) 14/10/2010, 08:14

Podrías hacerlo con DOM (creo que así funciona):

Código Javascript:

Ver originalfunction hideUnhideElement(este){
 este.style.display=este.style.display == 'none'?'block':'none';
}

Código HTML:

Ver original<td onclick='hideUnhideElement(this.nextSibling);' ...>

Saludos (:

abimaelrc · #3 (**permalink**) 14/10/2010, 08:37

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.

abimaelrc · #4 (**permalink**) 14/10/2010, 16:25

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

caricatos · #5 (**permalink**) 14/10/2010, 17:30

Hola:

Detallillos:

Tema de javascript (¿

o me lo parece...

?...

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

Saludos

zerokilled · #6 (**permalink**) 14/10/2010, 20:58

¡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.

abimaelrc · #7 (**permalink**) 14/10/2010, 21:23

@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