ocultar/mostrar n elementos “tr” a partir de otro elemento tr en una tabla

publicado por: Anonymous

Actualmente sólo puedo mostrar/ocultar un solo elemento así:

_x000D_

_x000D_

$(document).ready(function () {_x000D_
        $("#Mostrar_Tabla").click(function () {_x000D_
            if ($("#Tabla_Mostrar").is(":visible")) {_x000D_
                document.getElementById("Tabla_Mostrar").style.display = 'none';_x000D_
            }_x000D_
            else {_x000D_
                document.getElementById("Tabla_Mostrar").style.display = '';_x000D_
            }_x000D_
        });_x000D_
    });

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<table class="table">_x000D_
    <tr id="Mostrar_Tabla">_x000D_
        <td>_x000D_
            Dale Click Aqui_x000D_
        </td>_x000D_
    </tr>_x000D_
    <tr id="Tabla_Mostrar">_x000D_
        <td>_x000D_
            <table class="table">_x000D_
                <tr>_x000D_
                    <td>1</td>_x000D_
                    <td>2</td>_x000D_
                    <td>3</td>_x000D_
                    <td>4</td>_x000D_
                </tr>_x000D_
            </table>_x000D_
        </td>_x000D_
    </tr>_x000D_
</table>

_x000D_

_x000D_

_x000D_

Pero necesito hacerlo funcionar con n elementos tr. ¿Cómo tendría que modificar mi script para que funcione con el html como éste?:

_x000D_

_x000D_

<table class="table">_x000D_
    <tr id="Mostrar_Tabla1">_x000D_
        <td>_x000D_
            Dale Click Aqui_x000D_
        </td>_x000D_
    </tr>_x000D_
    <tr id="Tabla_Mostrar1">_x000D_
        <td>_x000D_
            <table class="table">_x000D_
                <tr>_x000D_
                    <td>1</td>_x000D_
                    <td>2</td>_x000D_
                    <td>3</td>_x000D_
                    <td>4</td>_x000D_
                </tr>_x000D_
            </table>_x000D_
        </td>_x000D_
    </tr>_x000D_
        <tr id="Mostrar_Tabla2">_x000D_
        <td>_x000D_
            Dale Click Aqui_x000D_
        </td>_x000D_
    </tr>_x000D_
    <tr id="Tabla_Mostrar2">_x000D_
        <td>_x000D_
            <table class="table">_x000D_
                <tr>_x000D_
                    <td>1</td>_x000D_
                    <td>2</td>_x000D_
                    <td>3</td>_x000D_
                    <td>4</td>_x000D_
                </tr>_x000D_
            </table>_x000D_
        </td>_x000D_
    </tr>_x000D_
        </tr>_x000D_
        <tr id="Mostrar_Tabla3">_x000D_
        <td>_x000D_
            Dale Click Aqui_x000D_
        </td>_x000D_
    </tr>_x000D_
    <tr id="Tabla_Mostrar3">_x000D_
        <td>_x000D_
            <table class="table">_x000D_
                <tr>_x000D_
                    <td>1</td>_x000D_
                    <td>2</td>_x000D_
                    <td>3</td>_x000D_
                    <td>4</td>_x000D_
                </tr>_x000D_
            </table>_x000D_
        </td>_x000D_
    </tr>_x000D_
</table>

_x000D_

_x000D_

_x000D_

solución

A cada tr al que le haces clic asígnale una clase (la misma para todos):

<table class="table">
    <tr id="Mostrar_Tabla1" class="Mostrar_Tabla">
        <td>
            Dale Click Aqui
        </td>
    </tr>
    <tr id="Tabla_Mostrar1">
        <td>
            <table class="table">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
            </table>
        </td>
    </tr>
    ...
</table>

En el código JavaScript, declara el evento click sobre los elementos con esa clase. En este evento, muestras u ocultas el tr cuyo id comience con Tabla_Mostrar que esté a continuación del tr en el que hiciste clic:

$('tr.Mostrar_Tabla').click(function(){
    $trOcultar = $(this).next('tr[id^="Tabla_Mostrar"]');

    if ($trOcultar.is(":visible")) {
        $trOcultar.css('display', 'none');
    }
    else {
        $trOcultar.css('display', '');
    }
});

Como alternativa, si no puedes o prefieres no agregar la clase a estos tr, puedes hacer que el evento afecte a los tr cuyo id comience con Mostrar_Tabla:

$('tr[id^="Mostrar_Tabla"]').click(function(){
    $trOcultar = $(this).next('tr[id^="Tabla_Mostrar"]');

    if ($trOcultar.is(":visible")) {
        $trOcultar.css('display', 'none');
    }
    else {
        $trOcultar.css('display', '');
    }
});
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *