jqueryでチェックボックスを使いテーブルの表示非表示を行い、同時に行の背景を交互に違う色にする方法は？

質問

テーブルタグで作られた表の「tr」へ「class」を設定し、チェックボックスにより、行の表示、非表示を切り替える。

テーブルの行の背景色を交互に違うものにする。

この方法のそれぞれのやり方は分かったのですが、チェックボックスで表示を切り替えた後、行の背景色は、切り替え前の状態が維持されたままの状態になってしまいます。

チェックボックスを使用した後においても、交互に背景色を適用させるためにはどうしたら良いでしょうか？

初心者の為、見よう見まねで行っており、至らない部分が多々あり申し訳ございません。
どうぞ宜しくお願い致します。

回答No.2

mtaka2

おそらく jQuery のフィルタセレクタ :even、:odd を使って「交互に背景色を変える」ことを実現していると思いますが、

表示非表示のクラスセレクタと、フィルタセレクタを両方併用すれば、
「表示しているもののうち偶数行目、基数行目」に対しての処理ができます。

たとえば、表示している行の tr に classを設定しているなら、
例えば、クラス名がhogeだとすると、
$("table tr.hoge:even td").css("background-color", "#fff");
$("table tr.hoge:odd td").css("background-color", "#cff");

を実行すれば、class=hogeが設定されている行が、交互に白・水色になります。

逆に、表示していない行の tr にclass設定をしているのなら、
例えば、、クラス名がfuga だとすると、
$("table tr:not(.fuga):even td").css("background-color", "#cff");
$("table tr:not(.fuga):odd td").css("background-color", "#fff");
を実行すれば、class=fugaが設定されていない行が、交互に白・水色になります。

こういったコードを、表示・非表示のclassを設定しているコードの後で実行してください。

回答No.1

askaaska

どんな風に交互を実装したのか不明だけど
恐らく、ループでtrタグを探して
偶数個目か奇数個目かでスタイルを切り替える
って感じかしら？

だとしたら、カウンター変数をひとつ用意し、
現在何行目を処理しているか格納する。
if文で偶数or奇数の判定の前に
その行が現在表示しているかどうかを判定させる。

まあ、こんな感じね。

表示非表示の切り替えをどうやってるか知らないけど
まあ、３,４行追加すればできるんじゃないかしら。