jquery - 交换表格行的顺序但保留斑马条纹

Question

我有一个小的 jQuery 函数，我可以通过单击向上箭头或向下箭头来交换行。行交换完美地工作。我想不通的是为什么我对条纹颜色的处理不起作用。下面是一个示例，如果您单击“向上”箭头。

    // =================================
    // 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);

    }); 

使用此代码，颜色不会交换。如您所见，我正在尝试保存交换中涉及的两行的实例，然后切换它们。这需要在 IE8 中工作。

编辑:

彩色行的 CSS 是这样的:

.st_lr_r1 {
    background-color: #DEEAF1;
}

“白色”行 (.st_lr_r0) 没有应用颜色。

Answer 1

可以直接在CSS中声明even和odd，而不是依赖JS来实现。

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

Fiddle.

IE8?

使用 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.

是的，通过 jQuery 使用相同的选择器将适用于 IE8。 :)