Попытка полосы зебры произвольные ряды в таблице

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

Вы можете сделать это слишком сложно. Если вы хотите заняться Zebra Striping, почему бы просто не использовать что -то вроде : нечетный селектор и изменить класс в зависимости от. Что-то вроде этого...

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

И тогда CSS будет чем -то вроде ...

.zebra 
{
    background-color: #dddddd;
}