How to display only the first row of a table?

Asked

Viewed 435 times

5

I have a table with summaries about a particular client, where the first line is the main content to be displayed, and the rest is a mere complement.

I know I could apply display: none, but I believe that it should not be the best way to be done. I want to hide the rest of the <tr> and display them with the toggle, that is already being done:

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

1 answer

6


See the example using the selector :not(first-child) to manipulate only other lines.

  • CSS: tr:not(:first-child) - Manipulate all rows in the table other than the first.
  • Jquery tr:not(:first-child) - Hold the event only on lines other than the first.

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

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.