Looping through table rows with Javascript/Jquery

Question

So what I'm trying to do is get the last row of an HTML table. If this row then has a certain class I will ignore this row and select the previous one. This would then be cycled through from the end of the table until a row was found without this certain class.

I figured it's probably involving a for loop, a check for the row class and then JQuery's row.prev method, but still not quite sure how to approach this.

Thanks in advance!

With jQuery it's a one-liner as shown below. Without jQuery it's still only about three or four lines using a for loop over the table.rows collection, checking the class and breaking out of the loop when found. — nnnnnn
– nnnnnn, Commented Dec 28, 2011 at 15:45

Adam Rackis · Accepted Answer · 2011-12-28 15:39:26Z

3

To get the last table row that doesn't have a certain class, say targetClass, you can do this:

$("tr:not(.targetClass):last");

I'm not sure what you want to do with this table row, but if you were to add targetClass to the last row that didn't have it, it would look like this

$("tr:not(.targetClass):last").addClass("targetClass");

Check out this fiddle to see it in action

edited Dec 28, 2011 at 15:39

answered Dec 28, 2011 at 15:32

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Armin · Accepted Answer · 2011-12-28 15:41:17Z

2

This example shows you how to get the last of each table on the current page: http://jsfiddle.net/JBnzK/

$('table').find('tr:last').each(function(){
    if ($(this).hasClass('stupid')) {
        $(this).css('color', 'red');
    } else {
        $(this).css('color', 'green');
    }
});

answered Dec 28, 2011 at 15:41

Armin

16k10 gold badges50 silver badges66 bronze badges

Comments

Didier Ghys · Accepted Answer · 2011-12-28 15:59:31Z

Assuming you've got the following HTML:

<table id="mytable">
    <tbody>
        <tr>
            <td>1</td>
        </tr>
        <tr id="YouFoundMe">
            <td>1</td>
        </tr>
        <tr class="certainclass">
            <td>1</td>
        </tr>
        <tr class="certainclass">
            <td>1</td>
        </tr>
        <tr class="certainclass">
            <td>1</td>
        </tr>

    </tbody>
</table>

You can do this:

var elWithoutClass = $('#mytable tr:not(.certainclass):last');

if (elWithoutClass.length) {
    alert(elWithoutClass.get(0).id);
    // alerts "YouFoundMe"
}

:not(.certainclass) will eliminate <tr> without class 'certainclass'
:last will get you the last one

I invite you to check the Selectors documentation page of jquery to learn more about them.

Collectives™ on Stack Overflow

Looping through table rows with Javascript/Jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related