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

скрыть/показать n элементов "tr" из другого элемента tr в таблице

  • 772

В настоящее время я могу показать/скрыть только один элемент, например:

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

Но мне нужно заставить его работать с n элементами tr. Как мне изменить свой скрипт для работы с html следующим образом:

<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

    Назначьте каждому trклику класс (одинаковый для всех):

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

    В коде JavaScript объявите событие clickдля элементов с этим классом. В этом случае вы показываете или скрываете тот tr, чей идентификатор начинается с Tabla_Mostrarтого, который следует trза тем, который вы щелкнули:

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

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

    В качестве альтернативы, если вы не можете или предпочитаете не добавлять класс к этим tr, вы можете повлиять на событие tr, которое idначинается с 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. Я надеюсь, это поможет вам

    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>

    Ваше здоровье!

    • 3

  3. Он также остался таким, что немного проще:

    $("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. Я изменил их idтолько classна trтот, где он будет нажат, и я использовал next()jQuery, оставив скрипт таким образом:

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

    Что он делает, так $(this).next()это выбирает следующего брата, $('.Mostrar_Tabla')которым он будет<tr id="Tabla_Mostrar1">

    Пример:

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