3

2 つのテーブルがあり、新しいテーブルに基づいて行の色を交互にリセットしたいと考えています。これtr:oddは私の両方のテーブルに適用されているようです。

ここに私のテーブルhtmlがあります:

<table class='myTable'>
    <tr class='myRow'>
        <td>row 1</td>
    </tr>
    <tr class='myRow'>
        <td>row 2</td>
    </tr>
    <tr class='myRow'>
        <td>row 3</td>
    </tr>
</table>
<hr>
<table class='myTable'>
    <tr class='myRow'>
        <td>row 1</td>
    </tr>
    <tr class='myRow'>
        <td>row 2</td>
    </tr>
</table>

CSS:

.myAltRowClass { background: #DDDDDC; }

JavaScript:

$(".myTable .myRow:odd").addClass('myAltRowClass');

jsfiddle: http://jsfiddle.net/niner/Sgq9T/

1 番目のテーブルと 2 番目のテーブルは両方とも色が交互になっていますが、テーブル 2 の 1 番目の行は、代替 (灰色) ではなく、通常の (白) 色で開始する必要があります。

助けていただければ幸いです。ありがとう。

4

3 に答える 3

7

もちろん、それぞれの行をtable独立して選択するだけです:

$(".myTable").find('.myRow:odd').addClass('myAltRowClass');

JS フィドルのデモ。

または、CSS を使用することをお勧めします。

table.myTable tr:nth-child(even) {
    background: #DDDDDC;
}

JS フィドルのデモ。

evenCSS の例でに切り替えたことに注意してください:nth-child()。これは、JavaScript が 0 ベースであるのに対し、CSS は 1 ベースであるためです。

または、2 つのアプローチを組み合わせて、次のようにします。

$('.myTable tr:nth-child(even)').addClass('myAltRowClass');

JS フィドルのデモ。

于 2013-05-09T22:47:46.780 に答える
1

jQueryでも機能するCSS3セレクターを使用できます:nth-child(odd)（またはそれが必要な場合）。evenとにかく、それはネイティブでサポートされているセレクターではなく、jQuery はより:oddパフォーマンスの高いネイティブを使用できないためです ( docs でquerySelectorAll説明されているように)。

$(".myTable .myRow:nth-child(odd)")
    .addClass('myAltRowClass');

jsFiddle デモ

于 2013-05-09T22:48:00.880 に答える
1

これらに追加するだけです：jQueryの：odd、：evenなどの疑似クラスセレクターは、あなたが思うように動作しません。たとえば、前のセレクターによって作成された jQuery 配列の奇数メンバーを探します。$('.myTable .myRow:odd') は、$('.myTable .myRow') に基づいてオブジェクトの中間配列を作成し、その配列から偶数番号の要素を削除するものと考えることができます。:even、:first などについても同様です (ただし、nth-child() は異なり、期待どおりの動作をします)。

于 2013-05-09T23:15:34.320 に答える