0

I have a small jQuery function where I can swap rows by clicking on an up arrow or a down arrow. The row swap works perfectly. What I can't figure out is why my handling of the striping colors is not working. Here is an example if you click the "up" arrow.

    // =================================
    // UP & DOWN (Ordering) Arrows
    // =================================            
    $(".row-up").click(function() {

        var thisRow     = $(this).closest("tr");
        var thisRowBG   = $(thisRow).css("background");

        var aboveRow    = $(this).closest("tr").prev("tr"); 
        var aboveRowBG  = $(aboveRow).css("background");    

        $(thisRow).after($(aboveRow));

        // switch zebra colors
        $(aboveRow).css("background", thisRowBG);   
        $(thisRow).css("background", aboveRowBG);

    }); 

With this code, the colors are not swapping. As you see, I am trying to save the instances of the two rows involve in the swap and then switch them. This needs to work in IE8.

EDIT:

The CSS for the colored rows is this:

.st_lr_r1 {
    background-color: #DEEAF1;
}

the "white" row (.st_lr_r0) has no color applied.

8
  • How is the striping applied?
    – Paulie_D
    Nov 25, 2014 at 16:25
  • I will add that.. one moment... Nov 25, 2014 at 16:25
  • 2
    If you will use simple css selectors like :nth-child(odd/even) this will never be an issue
    – UtherTG
    Nov 25, 2014 at 16:28
  • 1
    What about using :nth-child(odd) and :nth-child(even) selectors, do those move when the row gets resorted? Might need a jsfiddle to test this. Ha, @UtherTG just beat me to it.
    – lharby
    Nov 25, 2014 at 16:28
  • I am just a single minion on a large project and have to work around other's programming. I can't change those things. So I have to be more imaginative. Maybe I just need to check if row has class st_lr_r1 and if so add and remove. Nov 25, 2014 at 16:29

2 Answers 2

3

You can declare even and odd directly in CSS instead of relying on JS to do it.

table > tbody > tr:nth-child(odd) {
    background-color: #eaeaea;
}
table > tbody > tr:nth-child(even) {
    background-color: #fff;
}   

Fiddle.

IE8?

Using jQuery:

$(document).ready(function() {
    $('table > tbody > tr:nth-child(even)').addClass('st_lr_r0');
    $('table > tbody > tr:nth-child(odd)').addClass('st_lr_r1');
});

Fiddle.

Yes, using the same selector through jQuery will work with IE8. :)

4
  • And is this supported cross browser including IE8? Nov 25, 2014 at 16:48
  • You didn't specify browser support. See updated answer in a sec! Nov 25, 2014 at 16:51
  • Apologies; I just added that a moment ago. Nov 25, 2014 at 16:51
  • Thanks, that worked great; I just had to also do a removeClass so my version is four lines. Nov 25, 2014 at 17:06
2

How about this then (needs testing)

$( "tr:odd" ).css( "background-color", "#DEEAF1" );

I lifted this straight from the jquery odd selector page. Obviously you can modify it to suit your needs.

http://api.jquery.com/odd-selector/

2
  • 1
    Vote up for that answer. First of all it's clean. Also used correct css. But I strongly suggest to modify css files instead
    – UtherTG
    Nov 25, 2014 at 16:34
  • That does seem like a perfect answer. It doesn't seem to be working as I am testing, but by the looks of it, it absolutely seems like it should. Let me keep testing... Nov 25, 2014 at 16:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.