Question

Sorry if the title doesn’t make sense, basically I have a bunch of table rows like this:

<table>
<tr class="odd">
<td><button class="button_clicked">Hide row</button></td>
</tr>
<tr class="even">
<td><button class="button_clicked">Hide row</button></td>
</tr>
<tr class="odd">
<td><button class="button_clicked">Hide row</button></td>
</tr>
<tr><td class="notes"</td></tr>
</table>

Each tr has a class, odd is a white background and even have a gray background. Im using jquery that says if a button in one of the td is clicked then hide the entire tr row where the button was clicked. Some table rows have an additional tr right after it for notes, so the jquery detects if that is present as well, if so remove that tr as well. But the issue now is if I hide a tr that has a gray background the table row below it comes up and now I have 2 table rows that are white and breaks the odd/even design of the table rows. So I tried writing additional code below to do additional check but it stops the script from working. It doesnt give me an error, it just shows the script as aborted, any suggestions?

        $('.button_clicked').click( function(e) {

        var row = $(this).closest('tr');

        // hide this row first
        row.hide();

        // next, get the next TR, see if it is a notes row, and hide it if it is
        var nxt = row.next();

        if (nxt.hasClass('show_notes')) {

            nxt.hide();

        }else
        {

            if (nxt.hasClass('odd')) {

                nxt.attr('class','even');

            }else
            {

                nxt.attr('class','odd');

            }

        }

        e.preventDefault();

    });

Answer 1

Try doing this instead

if (nxt.hasClass('show_notes')) {
    nxt.hide();
}
else {
    row.nextAll('tr').toggleClass('odd even');
}