onMouseOverで複数（？）のセル内の色を変更したいとき

質問

はじめまして、こんにちは。
初歩的な質問なので恐縮ですが、、どうしてもわからないのでどなたか教えてください(> <)

テーブルの各行の上をカーソルが通過するとその行の色が変わる（通過しおわると元の色に戻る）というのをプログラムを作りたいのです。。
一行ごとでしたらonMouseOver,onMouseoutを使って
簡単にできますが、カーソルが『りんご』の行の上にあるときは『くだもの』のセルも一緒に色を変える、また『みかん』の行の上のときも『くだもの』のセルも一緒に色を変える・・・というように『バナナ』も『メロン』も同じように色変更させたいのです・・・

説明が下手で大変申し訳ございませんが、どうかよろしくお願い致します。（ジャバスクリプトは勉強を始めたばかり・・・というレベルなのです比較的簡単なソースでお願いします）

ソースは下記になります↓

<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="4">くだもの</td>
<td>りんご</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>みかん</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>バナナ</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>メロン</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="2">野菜</td>
<td>なす</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>とまと</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

よろしくお願い致しますm(__)m

回答No.5

yambejp · ベストアンサー

#3です。

見返してみるとバグがあったりで、思い切ってだいぶ変更してみてました。
背景だけでなく、文字色を変えたりいろいろ希望がでてくるとおもいますので
classで調整するといいかもしれないですね。

ちなみにあらたに行を追加するときのやりかたとしては・・・
見出しになるtdにidをふって、それと同じ名前のclassを各行のtrに
ふってやればいけるはず。

<style>
.fruit{
background-Color:blue;
}
.vegetable{
background-Color:green;
}
.cereal{
background-Color:yellow;
}
.onmouse{
background-Color:red;
color:white;
text-decoration:blink;
font-weight:bold;
}
</style>

<script>
window.onload=function(){
var trs=document.getElementsByTagName("tr");
var thisClass="";
var classNames=new Array();
for(var i in trs){
if(trs[i].className) classNames[trs[i].className]=true;
trs[i].onmouseover=function(){
thisClass=this.className;
this.className=this.className+(this.className.indexOf(" onmouse")==-1?" onmouse":"");
document.getElementById(thisClass).className="onmouse";
}
trs[i].onmouseout=function(){
this.className=this.className.replace(" onmouse","");
document.getElementById(thisClass).className="";
}
}

for(var j in classNames){
document.getElementById(j).onmouseover=function(){
for(var i in trs){
if(this.id==trs[i].className){
trs[i].className=trs[i].className+(trs[i].className.indexOf(" onmouse")==-1?" onmouse":"");
}
}
}
document.getElementById(j).onmouseout=function(){
for(var i in trs){
if(trs[i].className)
if(trs[i].className.indexOf(" onmouse")>0){
trs[i].className=trs[i].className.replace(" onmouse","");
}
}
}
}
}
</script>

<table width="300" border="1" cellspacing="0" cellpadding="0">
<tr class="fruit">
<td rowspan="4" id="fruit">くだもの</td>
<td>りんご</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="fruit">
<td>みかん</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="fruit">
<td>バナナ</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="fruit">
<td>メロン</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="vegetable">
<td rowspan="2" id="vegetable">野菜</td>
<td>なす</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="vegetable">
<td>とまと</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cereal">
<td rowspan="3" id="cereal">穀物</td>
<td>米</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cereal">
<td>小麦</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cereal">
<td>トウモロコシ</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

お礼

再度の丁寧なお返事どうもありがとうございます。
明日までなになんとかしなければならないものなので
早くご返事いただいてとっても嬉しいです！

『見出しになるtdにidをふって、それと同じ名前のclassを各行のtrに
ふってやれば・・・』というのはやってみましたけど、スクリプトのエラーがでてきてできなかったような気が・・・でも再度やってみます！！私のことだからなにか間違ってた可能性大なので・・・(f^^;)
ほんとうにありがとうございましたm(_ _)m

回答No.4

noname#39970

原理だけ

「くだもの」の色を変更するfunctionを作る
function kudamono(color){}
colorにセットされた色に変更する物として作成

overの時にりんごやみかん等を変更すると同時に変更したい色と一緒に作ったfunctionを呼ぶ
out時は基本の色と一緒に呼べば戻る。透過なら"transparent"をセットして機能するようにしておく
http://www.tohoho-web.com/css/reference.htm#background-color

お礼

お返事ありがとうございます。
原理もきちんと勉強していきたいと思います!

本当ににありがとうございましたm(_ _)m

回答No.3

yambejp

classとidでこんな感じでも・・・

<style>
.fruit{
background-Color:blue;
}
.vegetable{
background-Color:green;
}
</style>
<script>
window.onload=function(){
var onmouseColor="red";
var defaultColor="";
var trs=document.getElementsByTagName("tr");
for(i in trs){
trs[i].onmouseover=function(){
this.style.backgroundColor=onmouseColor;
defaultColor=document.getElementById(this.className).style.backgroundColor;
document.getElementById(this.className).style.backgroundColor=onmouseColor;
}
trs[i].onmouseout=function(){
this.style.backgroundColor="";
document.getElementById(this.className).style.backgroundColor=defaultColor;
}
}
group=Array("fruit","vegetable")
for(var j in group){
document.getElementById(group[j]).onmouseover=function(){
for(var i in trs){
if(trs[i].className)
if(this.id==trs[i].className) trs[i].style.backgroundColor=onmouseColor;
}
}
document.getElementById(group[j]).onmouseout=function(){
for(var i in trs){
if(trs[i].className)
if(this.id==trs[i].className) trs[i].style.backgroundColor=defaultColor;
}
}
}
}

</script>

<table width="300" border="1" cellspacing="0" cellpadding="0">
<tr class="fruit">
<td rowspan="4" id="fruit">くだもの</td>
<td>りんご</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="fruit">
<td>みかん</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="fruit">
<td>バナナ</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="fruit">
<td>メロン</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="vegetable">
<td rowspan="2" id="vegetable">野菜</td>
<td>なす</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="vegetable">
<td>とまと</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

お礼

お返事ありがとうございます。
シンプルなソースでとても参考になりました。
一点質問ですが、このソースの場合、親セルが右に３～５個増えた場合（ここで言う親セルは『くだもの』『野菜』にあたります）どうすればよいのでしょうか？？
ちょっといじってみたのですが、、やはりどうにもできませんでした(> <)
ほんとに質問ばかりですみませんが、よろしかったらぜひ教えて下さいm(_ _)m

回答No.2

susie-t

<html>
<script language="JavaScript" type="text/javascript">
function k_over(elem){
elem.style.backgroundColor = "#ffff00";
var kudamono = document.getElementById("kudamono");
kudamono.style.backgroundColor = "#ffff00";
}
function k_out(elem){
elem.style.backgroundColor = "";
var kudamono = document.getElementById("kudamono");
kudamono.style.backgroundColor = "";
}
function y_over(elem){
elem.style.backgroundColor = "#ffff00";
var yasai = document.getElementById("yasai");
yasai.style.backgroundColor = "#ffff00";
}
function y_out(elem){
elem.style.backgroundColor = "";
var elem = document.getElementById("yasai");
elem.style.backgroundColor = "";
}
</script>
<body>
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="kudamono" rowspan="4">くだもの</td>
<td onmouseover="k_over(this);" onmouseout="k_out(this);">りんご</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td onmouseover="k_over(this);" onmouseout="k_out(this);">みかん</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td onmouseover="k_over(this);" onmouseout="k_out(this);">バナナ</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td onmouseover="k_over(this);" onmouseout="k_out(this);">メロン</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td id="yasai" rowspan="2">野菜</td>
<td onmouseover="y_over(this);" onmouseout="y_out(this);">なす</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td onmouseover="y_over(this);" onmouseout="y_out(this);">とまと</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
<html>
-------------------------------
<td onmouseover="y_over(this);" ・・・
等のthisはその要素自身を意味します。ちょっと難しいかもしれませんが、使えると非常に便利なので覚えて損はないと思います。
(要素).style.backgroundColorに値を入れれば背景色が変わります。指定形式はいくつかありますが、ここでは#rrggbb形式で指定しています。(これは大丈夫でしょうか？) 他、"yellow"とかでもOKです。

document.getElementById("要素のID")で要素が取得できます。これでkudamonoやyasaiのセルを取得しています。

ここではkudamonoとyasaiの関数を分けましたが、ちょっと工夫すれば共通関数にすることができると思います。(g_over(this, "kudamono/yasai");として呼べるようにする)

参考になれば幸いです。

お礼

お返事ありがとうございます。
説明までして下さったのでとてもわかりやすかったです。
参考になりました！！

本当にありがとうございましたm(_ _)m

回答No.1

steel_gray

サンプルです。

<html>
<head>
<title></title>
<style type="text/css">
.mouseover {
background-color:#666;
color:#fff;
}
</style>
<script type="text/javascript">
function sample1(obj){
// 親(TR)のclassを書き換え
obj.parentNode.className = 'mouseover';
// 親の親(tbody)を得る
var TBOD = obj.parentNode.parentNode;
// tbodyの最初の行・最初のセルのclassを書き換え
TBOD.rows[0].cells[0].className = 'mouseover';
}
function sample2(obj){
obj.parentNode.className = '';
var TBOD = obj.parentNode.parentNode;
TBOD.rows[0].cells[0].className = '';
}
</script>
</head>
<body>

<table width="300" border="0" cellspacing="0" cellpadding="0" id="TBL01">
<tbody>
<tr>
<td rowspan="4">くだもの</td>
<td>りんご</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>みかん</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>バナナ</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>メロン</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">野菜</td>
<td>なす</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>とまと</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
// 処理対象のtableを得る
var TBL = document.getElementById('TBL01');
// 全行・全セルを処理
for(var i=0;TBL.rows[i];i++){
for(var j=0;TBL.rows[i].cells[j];j++){
// onmouseover,onmouseoutを追加する
TBL.rows[i].cells[j].onmouseover=function(){sample1(this)};
TBL.rows[i].cells[j].onmouseout=function(){sample2(this)};
}
}
</script>

</body>
</html>

お礼

お返事ありがとうございます。
サンプルまで載せていただきありがとうございました！
一人では解決できなかったのですごく嬉しいです。

難しそうですが・・・サンプルをみて勉強したいと思います。
本当にありがとうございましたm(_ _)m