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

Question

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

Navigation

#1 by (5 votes)
#2 by (3 votes)
#3 by (3 votes)
#4 by (1 votes)

8

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

$(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 tr elements. How should I 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 html

asked by Xique 20.02.2017 в 20:15

source

4 answers

3

I hope this serves 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>

Greetings!

answered by 20.02.2017 в 21:00

3

I also stayed in this way that 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>

answered by 21.02.2017 в 23:12

1

I have changed the id by class only in the tr where you will be clicked and I made use of next() from jQuery leaving the script this way:

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

What $(this).next() does is select the next sibling of $('.Mostrar_Tabla') which 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>

answered by 20.02.2017 в 21:00

Libraries of c ++ and c Detect and destroy colliding objects

score 5 · Accepted Answer

At each tr that you click on, assign 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 click event on the elements with that class. In this event, show or hide the tr whose id starts with Tabla_Mostrar that is next to the tr you clicked on:

$('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 not or do not prefer to add the class to these tr , you can have the event affect the tr whose id begins 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', '');
    }
});