试图在表格中对Zebra条带化任意行

Question

我有一个表,其中包含由类标记的行.这些行应该是斑马条纹.需要注意的是,它们并不总是连续的.

我尝试过按表和类名匹配,但最终结果总是不正确.发生的事情是条带化将应用于表级别,然后仅在具有类的行上启用.

我需要改变什么才能使这项工作像我想要的那样？

脚本

function FormatTable()
{
   $("#TableId .arbitrarySelector:nth-child(2n+1)" ).addClass('anotherEquallySpecialRow')
}

HTML

<table id="TableId" onclick="FormatTable()">
    <tr class="arbitrarySelector">
        <td><div class="space">Should be Changed and is</div></td>
    </tr>
    <tr class="arbitrarySelector">
        <td><div class="space">Should Not be Changed and is Not</div></td>
    </tr>
    <tr class="arbitrarySelector">
        <td><div class="space">Should be Changed and is</div></td>
    </tr>
    <tr>
        <td><div class="space"></div></td>
    </tr>
    <tr class="arbitrarySelector">
        <td><div class="space">Should NOT be changed but is</div></td>
    </tr>
    <tr>
        <td><div class="space"></div></td>
    </tr>
    <tr class="arbitrarySelector">
        <td><div class="space">Should be Changed and is</div></td>
    </tr>
    <tr>
        <td><div class="space"></div></td>
    </tr>
    <tr>
        <td><div class="space"></div></td>
    </tr>
    <tr class="arbitrarySelector">
        <td><div class="space">Should Not be Changed and is Not</div></td>
    </tr>
    <tr class="arbitrarySelector">
        <td><div class="space">Should be Changed and is</div></td>
    </tr>
    <tr class="arbitrarySelector">
        <td><div class="space">Should Not be Changed and is Not</div></td>
    </tr>
</table>

Answer 1

你可能会让这太困难了.如果你想做斑马条纹,为什么不使用像:奇数选择器这样的东西并改变类依赖.像这样......

// Add zebra striping.
$('.arbitrarySelector:odd').addClass('zebra');

然后CSS会像......

.zebra 
{
    background-color: #dddddd;
}