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

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

0 голосов
/ 21 декабря 2010

У меня есть таблица, в которой есть строки, помеченные классом.Эти ряды должны быть в полоску зебры.Предостережение заключается в том, что они не всегда являются последовательными.

Я пробовал сопоставлять по имени таблицы и класса, но конечный результат всегда неверен.Происходит следующее: чередование будет применяться на уровне таблицы, а затем включаться только для строк с классом.

Что мне нужно изменить, чтобы эта работа работала так, как я собираюсь?

Скрипт 

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>

1 Ответ

6 голосов
/ 21 декабря 2010

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

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

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

.zebra 
{
    background-color: #dddddd;
}
...