Skip to main content
removeu 12 caracteres do conteúdo
Fonte Link
Pedro Camara Junior
  • 6,8mil
  • 3
  • 20
  • 55

Veja o exemplo que fiz utilizandousando 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>

Veja o exemplo que fiz utilizando 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>

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>

Fonte Link
Pedro Camara Junior
  • 6,8mil
  • 3
  • 20
  • 55

Veja o exemplo que fiz utilizando 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>