マウスオーバー(OnMouse/MouseOver)で一覧表示された行の背景色を変える
"katachi"というTABLEを使った一覧表があります。
<table id="katachi">
<tr><th>行NO</th><th>名前</th></tr>
<tr><td>1</td><td>かーくん</td></tr>
<tr><td>2</td><td>たーくん</td></tr>
<tr><td>3</td><td>ちーちゃん</td></tr>
</table>
この一行一行にマウスが当たったら色が変わるソースをイメージしてみましょう。
Answer
$(function(){
$("#katachi tr").each(function(){
//元の色を取得する
var OriginalColor = $(this).css('backgroundColor');
$(this).hover(function(){
$(this).children().not('th').css({
backgroundColor:"#cccccc",
cursor:"pointer"
});
},function(){
$(this).children().not('th').css({
backgroundColor:OriginalColor,
color:'#000000'
});
});
});
});
$(function(){
$("#katachi tr").each(function(){
//元の色を取得する
var OriginalColor = $(this).css('backgroundColor');
$(this).hover(function(){
$(this).children().not('th').css({
backgroundColor:"#cccccc",
cursor:"pointer"
});
},function(){
$(this).children().not('th').css({
backgroundColor:OriginalColor,
color:'#000000'
});
});
});
});
[注意]ソースコードには全角が混じっていいます。