Question

我有一个小jQuery函数，我可以通过单击向上箭头或向下箭头来交换行。行交换工作完美。我无法弄清楚为什么我对条纹颜色的处理不起作用。这是一个例子，如果你点击＆＃34; up＆＃34;箭头。

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

＆＃34;白色＆＃34;行（.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。：）

Answer 2

那么（需要测试）

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

我直接从jquery奇数选择器页面解除了这个。显然，您可以根据自己的需要进行修改。

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

交换表行的顺序但保留Zebra Striping

2 个答案: