CODEWITHSUNDEEP
jqueryhtmljquery-selectors
Etienne Marais
Etienne Marais

Reputation: 1690

How to get the last visible child table row of a html table with jQuery?

I want to know how to get the last visible child of an HTML table using jQuery? The reason I ask is, I cannot use CSS 3 to get the last child because older browsers do not support it and this is kind of a legacy projects I am working on.

I have a table structure like this:

<table id="table">
    <tr>
        <td>Some name</td>
    </tr>
    <tr>
        <td>Some name</td>
    </tr>
    <tr style="display:none;">
        <td>Some name</td>
    </tr>
</table>

The last table row is not visible and it gets shown when clicking on a plus sign next to the data but it is not relevant. I want to find out how to get the last visible table row using jQuery selectors.

Currently I am using

$last = $('#table').find('tbody tr:last-child');
$last.addClass('last-child');

But its actually returning the hidden table row.

Thank you in advance

Upvotes: 2

Views: 9282

Answers (4)

Marco Johannesen
Marco Johannesen

Reputation: 13134

$last = $('#table').find('tbody tr:visible:last');
$last.addClass('last-child');

http://jsfiddle.net/ptGE2/

As Mathieu linked to.

Upvotes: 2

Riz
Riz

Reputation: 10236

$last = $('tbody tr:visible').last();

Upvotes: 5

Dr.Molle
Dr.Molle

Reputation: 117314

Try:

$('tr:visible:last','#table')

Upvotes: 16

max4ever
max4ever

Reputation: 12142

try one of these

$last = $('#table').find('tbody tr:visible:last-child');

or

$last = $('#table').find('tbody tr:visible').is(':last-child');

Upvotes: 0

Related Questions