Foros del Web - Ver Mensaje Individual

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.