吉見です。

ずいぶん前の記事の続きです。

以前の記事で、row の色を変更するプログラムを書くと、何かの拍子でその下
のcellの色が代入され、固定になってしまうことを書きました。それを防ぐた
めにcellの色をすべて初期化するという小手先の業でしのいだのです。

夏休みになって時間がとれたために、これをいよいよウェブページ
http://www.geocities.co.jp/Bookend-Soseki/3185/Jokes/index.html
に応用したのですが、うまくありません。なぜか一部のcellの色が固定されて
しまいます。（上のページから年代順リスト＞各年のページを見てください）

（１）IE では、cellの中にlinkがあると、マウスがそれにさわったときに何
かステータスの変化があってその後はrows.cell[i]の変更ができなくなってし
まいます。参照はできます。下に添付したサンプル画面下の[tab0 row0]など
と書かれたセルをクリックして表示させると、それぞれのrow 
内のセルの色が見えるので。でも、色が固定したあとではクリアしようとして
もエラーになるようです。

（２）今回Operaでも試したところ、Operaでは、cellのbgColorをクリアしよ
うとしてnullを代入すると、値が#000000になってしまい、真っ黒になってし
まうことがわかりました。
値をnullにするのはいけないことなんでしょうか。

（３）NSではいまのところ上の二つの問題はおきておらず、正常に表示できま
す。でも、javascript:でエラーを表示させると、マウスがリンクの上を通っ
たときに"row.cells has no properties"というエラーが出るので、問題は起
きています。画面に現れないだけで。

で、どうも、問題が二つあって、
Ａ：マウスがリンクに触るとrow.cellのアクセスに問題が出る現象

Ｂ：row.cell[i].bgColor = null を実行すると #000000が代入されてしまう
現象(Operaのみ)

があるようです。後者は何やらバグっぽいですが、これらは回避可能でしょう
か。どのように回避できるでしょうか。


Takashi YOSHIMIさんの<bc4pfc$1s5g$1@nwall2.odn.ne.jp>から
>注目していただきたいのは、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%><a href="#">Ant</a></td><td >Bat</td>
></tr>
><tr onMouseOver="flipbg(event)" onMouseOut="flipbg(event)" >
><td width=50%>Cat</td><td><a href="#">Dog</a></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