吉見です。

自己フォロー。

吉見隆さんの<bc3alg$cuk$1@xfire.aist.go.jp>から
>>デバッグ用にウィンドウをオープンし、id を全てに付けて
>>イベントを表示させてみたところ、テーブルの文字上では
>>td に対しても onMouseOver/Out が発生しているようです。
>>tr だけ選別して処理するだけではうまく動作しないような
>>イベントの発生のしかたでしたので、td で処理するとか
>>連動させるとか、なにか工夫が必要そうでした。

その後、さらに実験を繰り返し、下に添付したプログラムを作りました。
このプログラムでは、色の変わる下にそれぞれの行とその下のセルのbgColor
を表示するボタンがあるテーブルがあります。

注目していただきたいのは、flipbg()の最後にある、対象となるrowの下の
cellのbgColorをすべてクリアする部分です。これをコメントアウトしたまま
実行し、下のボタン表を使ってbgColorを表示すると、正常な状態では

row のbgColor: 指定色、cellのbgColor:null

であるのに、NNでわざと色の異常を起こしてから同じように表示させると、

row　のbgColor: 指定色、異常なcellのbgColor: 固定色

となっています。つまり、何かの拍子で変更されないはずのcellの色が固定に
なり、その後、いくらそのrowのbgColorを変更しても反映されなくなってしま
うのです。ieでは、このようなセルの色が勝手に入ってしまう現象は起きませ
んでした。

ですので、プログラムにあるようにrowの色を変更したのちに、念のためにそ
の下のセルのbgColorをすべてnullにするようにすれば、ちゃんと色が望むよ
うに変わります。ときどき、右のセル、左のセルだけが色が変化するフリッ
カーみたいのが観測できますが。

ところで、この勝手にセルの背景色が変わってしまうというのは、もしやブラ
ウザのバグなのでしょうか？

##############ここからプログラム
<HTML lang="ja">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Script-Type" content="text/javascript">
<TITLE>テーブルホバー5F</TITLE>
<script language="JavaScript1.2">
<!--
function init()
{
  if(document.getElementById){
    turnoff_all(document.getElementById('tab0'));
    turnoff_all(document.getElementById('tab1'));
   }else{
    turnoff_all(document['tab0']);
    turnoff_all(document['tab1']);
  }
}


function flipbg(_event)
{
  if(!_event){
    _event = window.event;
  }
  if(_event.srcElement){
   row = _event.srcElement.parentElement;
  }else{
   row = _event.target.parentNode;
  }
  
  if(row.bgColor != "#ffff80"){
    row.bgColor = "#ffff80";
  }else{
    if(row.rowIndex % 2){
      row.bgColor = '#d0d0ff';
    }else{
      row.bgColor = '#c0ffc0';
    }
  }

  //// row以下のcellのbgColorをクリア///   
  //i=0;
  //while(row.cells[i]){
  //  row.cells[i].bgColor = null;
  //  i++;
  //}
  ////////////////////////////////////
}


function turnoff_all(tab)
{
  i = 0;
  while(tab.rows[i]){
    if(i % 2){
      tab.rows[i].bgColor = '#d0d0ff';
    }else{
      tab.rows[i].bgColor = '#c0ffc0';
    }
    i++;
  }
}

function show_tab(i,j)
{
  row = document.getElementById(i).rows[j];

  message="";
  message+="bgColor:"+row.bgColor+"\n";
  k = 0;
  while(row.cells[k]){
    k++;
  }
  message+="num of cells:"+k+"\n";

  for(n = 0; n < k; n++){
    message+=n+" bgolor:"+row.cells[n].bgColor+"\n";
  }
    
  alert(message);
}

//-->
</script>
</HEAD>
<BODY onload="init()">

<p>
<table id="tab0" border=0 cellspacing=0 width=100%>
<tr onMouseOver="flipbg(event)" onMouseOut="flipbg(event)">
<td  width=50%>Ant</td><td >Bat</td>
</tr>
<tr onMouseOver="flipbg(event)" onMouseOut="flipbg(event)" >
<td width=50%>Cat</td><td>Dog</td>
</tr>
<tr onMouseOver="flipbg(event)" onMouseOut="flipbg(event)" >
<td width=50%>Elephant</td><td width=50%>Fly</td>
</tr>
</table>
<br>
<br>
<table id = "tab1">
<tr onMouseOver="flipbg(event)" onMouseOut="flipbg(event)" >
<td width=50%>Elephant</td>
<td width=50%>Fly</td>
</tr>
<tr  onMouseOver="flipbg(event)" onMouseOut="flipbg(event)" >
<td width=50%>Goat</td><td>Hip</td>
</tr>
</table>
<br><br><br>


<p>
<p>
</div>
<br><br>

<table border=1>
<tr>
<td onClick="show_tab('tab0', 0);"> tab0 row0</td>
<td onClick="show_tab('tab0', 1);"> tab0 row1</td>
<td onClick="show_tab('tab0', 2);"> tab0 row2</td>
</tr>
<tr>
<td onClick="show_tab('tab1', 0);"> tab1 row0</td>
<td onClick="show_tab('tab1', 1);"> tab1 row1</td>
</tr>
</table>

</BODY>
</HTML>


##############ここまでプログラム

-- 
Takashi YOSHIMI mailto:tak-yoshimi@rio.odn.ne.jp