8

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

$(document).ready(function () {
        $("#Mostrar_Tabla").click(function () {
            if ($("#Tabla_Mostrar").is(":visible")) {
                document.getElementById("Tabla_Mostrar").style.display = 'none';
            }
            else {
                document.getElementById("Tabla_Mostrar").style.display = '';
            }
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
    <tr id="Mostrar_Tabla">
        <td>
            Dale Click Aqui
        </td>
    </tr>
    <tr id="Tabla_Mostrar">
        <td>
            <table class="table">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

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

<table class="table">
    <tr id="Mostrar_Tabla1">
        <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>
        <tr id="Mostrar_Tabla2">
        <td>
            Dale Click Aqui
        </td>
    </tr>
    <tr id="Tabla_Mostrar2">
        <td>
            <table class="table">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
            </table>
        </td>
    </tr>
        </tr>
        <tr id="Mostrar_Tabla3">
        <td>
            Dale Click Aqui
        </td>
    </tr>
    <tr id="Tabla_Mostrar3">
        <td>
            <table class="table">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

4 respuestas 4

5

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', '');
    }
});
1
  • @Xique Mmm, cierto. Estaba mirando la tabla que está dentro del tr y me confundí; lo corrijo. el 20 feb. 2017 a las 19:45
3

Espero esto te sirva,

function toggle(tableid){
  var id = jQuery(tableid).data('id')
  jQuery('#Tabla_Mostrar'+id).toggle();
}

jQuery(document).ready(function(){
  jQuery('.opciones').on('click', function(){
    toggle(this)
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
    <tr id="Mostrar_Tabla1" data-id="1" class="opciones">
        <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>
        <tr id="Mostrar_Tabla2" data-id="2" class="opciones">
        <td>
            Dale Click Aqui
        </td>
    </tr>
    <tr id="Tabla_Mostrar2">
        <td>
            <table class="table">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
            </table>
        </td>
    </tr>
        <tr id="Mostrar_Tabla3" data-id="3" class="opciones">
        <td>
            Dale Click Aqui
        </td>
    </tr>
    <tr id="Tabla_Mostrar3">
        <td>
            <table class="table">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Saludos!

3

También me quedó de esta forma que es un poco más sencilla :

$("tr.Galleta_Grande").click(function () { 
		$(this).next("tr.Galleta_Chica").toggle(); 
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table> 
   <tr class="Galleta_Grande"> 
       <th>Click Aqui para mostrar/ocultar</th> 
   </tr> 
   <tr class="Galleta_Chica"> 
      <td > 
        XD 
      </td> 
    </tr>
   <tr class="Galleta_Grande"> 
       <th>Click Aqui para mostrar/ocultar</th> 
   </tr> 
   <tr class="Galleta_Chica"> 
      <td > 
        XD 
      </td> 
    </tr>
   <tr class="Galleta_Grande"> 
       <th>Click Aqui para mostrar/ocultar</th> 
   </tr> 
   <tr class="Galleta_Chica"> 
      <td > 
        XD 
      </td> 
    </tr>
</table>

1

he cambiado los id por class únicamente en el tr donde se le hará clic y he hecho uso de next() de jQuery dejando el script de esta forma:

$('.Mostrar_Tabla').on('click',function(){
    if ($(this).next().is(":visible")) { 
        $(this).next().css('display', 'none');
    }
    else 
    {
        $(this).next().css('display', 'block');
    }
})

Lo que hace $(this).next() es seleccionar el siguiente hermano de $('.Mostrar_Tabla') el cual seria <tr id="Tabla_Mostrar1">

Ejemplo:

$('.Mostrar_Tabla').on('click',function(){
	if ($(this).next().is(":visible")) {
		//console.log($(this).next())
		$(this).next().css('display', 'none');
	}
	else 
	{
		//console.log($(this).next())
		$(this).next().css('display', 'block');
	}
})

$('button').on('click',function(){
  //simulando append desde success ajax
  $('table.table:eq(0)').append('<tr>'+
        '<td>'+
            '<table class="table">'+
                '<tr>'+
                    '<td>1</td>'+
                    '<td>2</td>'+
                    '<td>3</td>'+
                    '<td>4</td>'+
                '</tr>'+
            '</table>'+
        '</td>'+
    '</tr>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Añadir +</button>
<table class="table">
    <tr class="Mostrar_Tabla">
        <td>
            Dale Click Aqui
        </td>
    </tr>
    <tr>
        <td>
            <table class="table">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr class="Mostrar_Tabla">
        <td>
            Dale Click Aqui
        </td>
    </tr>
    <tr>
        <td>
            <table class="table">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
    <tr class="Mostrar_Tabla">
        <td>
            Dale Click Aqui
        </td>
    </tr>
</table>

1
  • Editare la respuesta haciendo un append() desde un botón que vendría siendo un append() desde ajax
    – JuankGlezz
    el 20 feb. 2017 a las 20:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.