jqueryを使ってtrの中のthとtdの色を入れ替えたいと思っていま

質問

jqueryを使ってtrの中のthとtdの色を入れ替えたいと思っています。
最近jqueryを導入してCSSをいじっているのですが、うまくいきません。
外部jsファイルで

$(function(){
$(".A tr > *").mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
});
$(".A tr:even").addClass("even");
});

と書いています。

イメージとしてはテーブル中のtrで偶数と奇数で縞々になっているとことをマウスが乗っかるとそのtrに内包するthとtdが同じ色に変わるように設定したいと思っています。

外部CSSでは
.over {
background-color: #999;
color: #FFF;
}
と設定しています。

これを実行するとするとthとtdが同時に色が変わらず、th上の時はthのみtd上の時はtdのみしか背景色がわりません。

参考となるURLだけでもかまいませんので、ご教授ください。

回答No.4

steel_gray · ベストアンサー

#1です
#3の回答を見てそーゆーのもありかな、と思ったので同じく対応するTHを処理する方法を。
ただし「trに内包する」ってあるので同じ行にthもあるものとしてます。

$(function(){
$(".A tr > *").hover(function(){
$(this).addClass("over");
$('th',$(this).parent()).addClass("over");
},function(){
$(this).removeClass("over");
$('th',$(this).parent()).removeClass("over");
});
$(".A tr:even").addClass("even");
});

あと、#2さんのご指摘はその通りでした。
cssの順序やセレクタの書き方には注意しておかないとクラスが変更されててもスタイルが適用されないケースがあります。
NGのケース
.over {～}
.even {～}
class="even over" になった時も後に記述があるevenのスタイルのまま

ついでに、最初の時に書きませんでしたがmouseoverとmouseoutの組み合わせならhoverが代わりにもなります。要素内に他の要素があってもmouseoutにならないのでこちらの方が使い勝手がいいかと思います。
http://semooh.jp/jquery/api/events/hover/over%2C+out/

お礼

丁寧な解説ありがとうございます!!
無事解決しました!!

回答No.3

yyr446

とりあえず、対応するTHも同時に色を変えるように
ちょっと追加しました。

$(function(){
$(".A tr > *").mouseover(function(){
var th=$(this).parents("table").get(0).rows[0].cells[this.cellIndex];
$(this).addClass("over");
$(th).addClass("over");
}).mouseout(function(){
var th=$(this).parents("table").get(0).rows[0].cells[this.cellIndex];
$(this).removeClass("over");
$(th).removeClass("over");
});
$(".A tr:even").addClass("even");
});

お礼

thまで変える仕様でお答えくださりありがとうございます!!
無事解決できました!!

回答No.2

fujillin

No1様と同じ意見なのですが…
その場合、その後に書いてある
　$(".A tr:even").addClass("even");
が、場合によってはバッティングするような気が…

お礼

ありがとうございます。
無事解決できました!!

回答No.1

steel_gray

セル上のイベントで操作してもイベントの起きたセルでしか効果が起きないのは当然の結果ですよね。
やるなら他のセルの処理も加えなければいけません。

ただ、マウスの乗った行の色を変えたいならthやtdではなくtrの背景を変えてはどうでしょうか。
$(function(){
$(".A tr").hover(function(){
$(this).addClass("over");
},function(){
$(this).removeClass("over");
});
$(".A tr:even").addClass("even");
});

お礼

ありがとうございます。
無事解決できました。