5

Tenho uma tabela com resumos sobre determinado cliente, onde a primeira linha é o principal conteúdo a ser exibido, e o restante é um mero complemento.

Sei que poderia aplicar display: none, mas acredito que não deva ser a melhor forma a ser feito. Quero ocultar o restante das <tr> e exibí-las com o toggle, que já está sendo feito:

$('#toggle-posicao-financeira').click(function() {
        $('#table-posicao-financeira').fadeToggle();
});

1 Resposta 1

6

Veja o exemplo usando o seletor :not(first-child) para manipular apenas as demais linhas.

  • CSS: tr:not(:first-child) - Manipular todas as linhas da tabela que não sejam a primeira.
  • Jquery tr:not(:first-child) - Realiza o evento apenas nas linhas que não sejam a primeira.

$('#mostrar').on('click', function() {
  $('table tr:not(:first-child)').toggle();
});
table tr:not(:first-child) {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="mostrar" href="javascript:void(0)">Mostrar detalhes</a>
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Arth</td>
    <td>90</td>
  </tr>
</table>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .