1

ゼブラ ストライプのテーブルがあります。

tr:nth-child(even)
{
    background-color: red;
}
tr:nth-child(odd)
{
    background-color: blue;
}

行を表示/非表示にして、テーブルをストライプ化したままにしたい (変更された行から最後の行に色を変更)。これを行うには2つの方法があります：

  1. 非表示のテーブルを作成し、<TR>jQueryafter()を使用して s を移動します。私はデタッチをテストしましたが、うまくいきます（デタッチ時にテーブルの色が変更されます）が、デタッチされた（どこにも）行を挿入してもうまくいかないため、行を別のテーブルに移動すると役立つはずです。
  2. 切り替えているものの直後に、非表示のtoggle()作成/削除とともにjQuery を呼び出します。<TR>

どちらの方がよいですか？たぶん、もっと良い方法がありますか？

よろしく、

4

1 に答える 1

7

CSS のセレクターは、兄弟間のインデックス:nth-childに基づいて要素を選択します。要素の可視性 (または他のセレクター) は考慮されません。

jQuery を使用して行を追加/削除する代わりに、クラス名を追加/削除するだけです: http://jsfiddle.net/rTER4/

var $allRows = $('tr:visible');
var $oddRows = $allRows.filter(':odd');
var $evenRows = $allRows.filter(':even');

// Remove old classes, then add new ones.
$oddRows.removeClass('even').addClass('odd');
$evenRows.removeClass('odd').addClass('even');

/* CSS */
tr.even { background-color: red; }
tr.odd  { background-color: blue;}
于 2012-07-05T19:54:42.823 に答える