テーブル内の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

これを難しくしているかもしれません。シマウマの縞模様をやりたいのなら、なぜ ：ODDセレクター クラスを変更します。このようなもの...

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

そして、CSSは次のようなものになります...

.zebra 
{
    background-color: #dddddd;
}