0

クラスによってタグ付けされた行を含むテーブルがあります。これらの行は、ゼブラ ストライプにする必要があります。注意点は、それらが常に連続しているわけではないということです。

テーブルとクラス名でマッチングを試みましたが、最終結果は常に正しくありません。何が起こっているかというと、ストライピングがテーブル レベルで適用され、クラスを持つ行でのみ有効になります。

これを意図したとおりに機能させるには、何を変更する必要がありますか?

脚本

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>
4

1 に答える 1

6

これを難しくしすぎている可能性があります。ゼブラ ストライピングを行いたい場合は、 :odd セレクターのようなものを使用して、それに応じてクラスを変更してみませんか。このようなもの...

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

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

.zebra 
{
    background-color: #dddddd;
}
于 2010-12-21T16:18:12.293 に答える