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

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.