Home / Questions / 50574
Accepted
Antonio
Asked: 2020-02-21 11:15:54 +0800 CST 2020-02-21 11:15:54 +0800 CST

hide/show n "tr" elements from another tr element in a table

  • 772

Currently I can only show/hide a single element like so:

$(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>

But I need to make it work with n elements tr. How would I have to modify my script to work with html like this:

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

jquery

4 Answers

  1. Best Answer

    Assign each trone you click a class (the same for all):

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

    In the JavaScript code, declare the event clickon elements with that class. In this event, you show or hide the one trwhose id starts with Tabla_Mostrarthat follows trthe one you clicked:

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

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

    Alternatively, if you can't or prefer not to add the class to these tr, you can have the event affect trwhose idstarts with 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', '');
    }
});
    • 5

  2. I hope this helps you

    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>

    Cheers!

    • 3

  3. It also stayed this way, which is a little simpler:

    $("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>

    • 3

  4. I have changed them idto classonly the trone where it will be clicked and I have made use next()of jQuery leaving the script in this way:

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

    What it does $(this).next()is select the next sibling of $('.Mostrar_Tabla')which it would be<tr id="Tabla_Mostrar1">

    Example:

    $('.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