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

Question

I need to display only the first two rows in a table, and on click on the div I need it to animate slideDown and show the full table. I could have just set display to none for all the table rows except the first two, but that will ruin the effect when I want to show them all...so instead I figured I should use overflow:hidden, and set a height on the 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>

Solution 1

Use jQuery's eq()

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

Where 0 represents the first td in the list

Solution 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());

Solution 3

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