How to get the height of the first two <tr> in a table using jQuery?

Question

I need to display only the first two rows in table, and when I click on the div I need to animate it slideDownand show the full table. I could just set displayin nonefor all the rows of the table except the first two, but this will ruin the effect when I want to show them all ... so instead I decided to use overflow:hiddenand set the height to div based on the height of the first two rows of the table. Any ideas how to do this?

Structure:

<div>
  <table>
    <tr>
      <td>data</td>
    </tr>

    <tr>
      <td>data</td>
    </tr>

    <tr>
      <td>data</td>
    </tr>

    <tr>
      <td>data</td>
    </tr>

    <tr>
      <td>data</td>
    </tr>
  </table>
</div>

Answer 1

Use jQuery eq ()

$('tr').eq(0).height();
$('tr').eq(1).height();

Where 0 represents the first tdin the list

Answer 2

<div id="div-table">
  <table>
    <tr>
      <td>data</td>
    </tr>

    <tr>
      <td>data</td>
    </tr>

    <tr>
      <td>data</td>
    </tr>

    <tr>
      <td>data</td>
    </tr>

    <tr>
      <td>data</td>
    </tr>
  </table>
</div>

Script will be:

alert($('#div-table table tr').eq(0).height());

alert($('#div-table table tr').eq(1).height());

Answer 3

$('tr:nth-child(1)>td, tr:nth-child(2)>td').css('height':100);