0

jquery を厳密に使用して、行の色を交互に変更すると問題が発生することに気付きました。私が説明することの例として、このフィドルを見ることができます。

CSS3 を使用して、複数のテーブルで期待どおりに機能するテーブルのストライピングを制御しています。

.table-zebra tbody > tr:nth-child(even) > td {background-color: lightgrey;}

偶数行ごとにライトグレーのストライプが入ります。カウントは最初の行から始まります。

CSS3 をサポートしていないブラウザーの場合、jquery を使用してこれを模倣します: (この例では、.table-striped を使用してフィドルの違いを示します)

  $(".table-striped tr:odd").css("background-color", 'lightgrey');

行数が奇数の複数のテーブルがある場合、jquery は前のテーブルからのカウントを継続し、これにより行が誤って交互に表示されます。

$.each を使用する以外に、jquery でこれを処理する簡単な方法はありますか?

4

2 に答える 2

0

CSS:

tr.even td {
    background-color: green;
}
tr.odd td {
    background-color: yellow;
}

JS:

 $('.table-striped > tbody').each(function () {
     $('tr:odd', this).addClass('odd').removeClass('even');
     $('tr:even', this).addClass('even').removeClass('odd');
 });

デモはこちら

于 2013-04-03T14:15:00.997 に答える