CODEWITHSUNDEEP
javascriptjqueryhtmlcssheight
Bluemagica
Bluemagica

Reputation: 5158

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

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>

Upvotes: 4

Views: 19199

Answers (3)

Hussein
Hussein

Reputation: 42818

Use jQuery's eq()

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

Where 0 represents the first td in the list

Upvotes: 4

Andy
Andy

Reputation: 30135

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

Upvotes: 1

Harsh Baid
Harsh Baid

Reputation: 7249

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

Upvotes: 3

Related Questions