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

隐藏/显示表格中另一个 tr 元素中的 n 个“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在具有该类的元素上声明事件。在这种情况下，您将显示或隐藏id 以您单击的那个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