jQuery change all tr classes after specified one

Question

I have a data table with alternating row background colors. I have an AJAX script to delete a row. I can't come up with a way to change the class of all the rows beneath the one that was deleted so that it alternates correctly again.

For example, considering the following:

`<tr id="1" class="row1">
   <td>blah</td>
 </tr>
 <tr id="2" class="row2">
   <td>blah</td>
 </tr>
 <tr id="3" class="row1">
   <td>blah</td>
 </tr>
 <tr id="4" class="row2">
   <td>blah</td>
 </tr>`

Now, using my AJAX script, I remove id2, then id3 will move underneath id1 and they will have the same row color. I managed to make my script change the next tr class, but that doesn't really help because then it's just the same color as the one after that. I can't figure out how to iterate through all of the next tr's, and change their class accordingly.

What I have so far:

$('#news_' + id).fadeOut('slow');

var currtr = $('#news_' + id).attr('class');
var nexttr = $('#news_' + id).closest('tr').next('tr').attr('id');

$('#' + nexttr).removeClass($('#' + nexttr).attr('class'));
$('#' + nexttr).addClass(currtr);

Answer 1

Easiest way is to go over the whole table again, e.g. add this after the fadeOut:

$('#id_of_your_table tr:even').addClass('even');

Edit: on second thought, that won't work since the row you faded still exists, but just isn't visible. You need to remove it from the DOM, or skip it when re-applying the zebra-effect. Example:

$('#news_' + id)
  .fadeOut('slow')
  .remove()
  .closest('table')
  .find('tr:even').addClass('even');

Or:

$('#news_' + id)
  .fadeOut('slow')
  .addClass('skip')
  .closest('table')
  .find('tr:not(.skip):even').addClass('even');

You can also target the table directly as in the first example, but you might as well move up from the faded row to the table its in.

Answer 2

You could use the next siblings selector to get all the rows following the one you are going to delete. Delete the desired row. Then, you should already have the following siblings, so just .each() them and change their class.

E.g.

var followingRows = $("#id2 ~ tr");
$("#id2").remove();
followingRows.each(function() {
    if (this.is('.even')
        this.removeClass('even').addClass('odd');
    else
        this.removeClass('odd').addClass('even');
});

Something close to that...

Answer 3

You could just iterate over the visible<tr> elements, and remove the class from the even ones, and apply to the odd ones.

Something like this:

Example: http://jsfiddle.net/2CZdT/

$('tr:odd').addClass('odd');

$('td').click(function() {
    $(this).parent().fadeOut(function() {
        $(this).siblings('tr:visible').filter(':even').removeClass('odd')
            .end().filter(':odd').addClass('odd');
    });
});​

I have the click event on the <td>, so when one is clicked, it traverses up to the parent <tr> element, fades it out, the in the callback, it grabs all visible sibling <tr> elements, filters the even ones, removes the .odd class, then goes back and filters the odd ones, and adds the .odd class.

Note that this presumes there's a default class applied in your CSS, then you override the odd ones (or even ones) with the alternating class.

Answer 4

Let CSS do the work for you.

table tr:nth-child(2n+1) {
   background-color: #eef;
}

no JavaScript required! =)

Answer 5

I would do something like this:

$('news_' + id).fadeOut('slow', function() {
    $(this).remove();
});
var i = 1;
$('tr').removeClass().each(function() {
    if (i == 1) {
        $(this).addClass('row' + i);
        i++;
    } else {
        $(this).addClass('row' + i);
        i--;
    }
});