Question

我已经为Zebra条纹设置了表格，但是如何使行颜色交替为2行而不是单行呢？

我的数据标记如下所示：

<tr>
        <td>@task.TaskNum</td>
            <td>@task.RepiarTime</td>
            <td>Priority Club</td>
            <td>SD</td>
            <td>Commercial</td>
            <td>Reg Commercial</td>
            <td>After Hours</td>
        </tr>
        <tr><td colspan="7">
                @task.Description.ToString()
            </td></tr>

我用它来条纹化：

    $(document).ready(function () {
    $(".stripeMe tr").mouseover(function () { $(this).addClass("over"); }).mouseout(function () { $(this).removeClass("over"); });
    $(".stripeMe tr:even").addClass("alt");
});

Answer 1

这样的事情应该有效：

$(".stripeMe tr").each(function(i){
    if (i%4 < 2){
        $(this).addClass("alt");
    }
});

Answer 2

要对每两行进行条带化处理：

$('.stripeMe tr:nth-child(3n+3)').addClass('alt');
$('.stripeMe tr:nth-child(3n+4)').addClass('alt');

Answer 3

为什么不试试n-child？这里有一堆变化。 How nth-child works.我确定你可以在javascript中使用伪：hover而不是.mouseover。

Answer 4

尝试使用.filter并获取index() % 3或(($(this).index()+1) % 3 == 0)。见下面的代码，

DEMO

$(document).ready (function () {
    $('#myTable tr').filter(function () {
        //or (($(this).index()+1) % 3 == 0) if you want 3rd row
        //to be highlighted first.

        return ($(this).index() % 3 == 0);
    }).addClass('alt');
});

Answer 5

像这样使用jquery nth child：

$(document).ready(function () {
    $(".stripeMe tr").mouseover(function () { $(this).addClass("over"); }).mouseout(function () { $(this).removeClass("over"); });
    $(".stripeMe tr:nth-child(3n)").addClass("alt"); // 3n selects every third element
});

Answer 6

CSS中应该有一种方法可以做到这一点，但如果你想要jQuery，请试试 jsFiddle example 。

jQuery的：

var index = 0;
$('tr').each(function() {
    $(this).addClass((index <= 1) ? 'odd' : 'even');
    index++;
    if (index == 4) index = 0;
});

CSS：

.odd {
    background: #999;
}
.even {
    background: #ddd;
}

交替表行颜色，但有2行数据

6 个答案: