- ベストアンサー
マウスオーバー時テーブルの背景色を変えているのですが
質問させていただきます。 テーブルを作成してマウスオーバーしている行の バックカラーを変えるプログラムを作成しています。 ですが、rowspanを使用すると、rowspanが別の行 扱いになり、バックカラーが変えられなくなってしまいました。 一緒にしたい場合どうしたら良いでしょうか。 もしわかりましたらご教授下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"><!-- firstcolor="#ffffff"; //初めの色 nextcolor="#eeeeee"; //変更後の色 function table_row(table_id){ tobj=document.getElementById(table_id).tBodies[0]; for (i=0; i<tobj.rows.length;i++){ tobj.rows[i].onmouseover=function(){this.style.backgroundColor=nextcolor}; tobj.rows[i].onmouseout=function(){this.style.backgroundColor=firstcolor}; } }// --></script> </head> <body> <table border=1 id="data_table2"> <thead> <tr> <th>No</th><th>DATA1</th><th>DATA2</th><th>DATA3</th> </tr> </thead> <tbody> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td rowspan="2"> </td><td rowspan="2"> </td><td>DATA</td><td>DATA</td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td>No</td><td>DATA</td><td>DATA</td><td>DATA</td> </tr> </tbody> </table> <script>table_row("data_table2")</script> </body> </html>
- ryuuzakika
- お礼率65% (17/26)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
横の罫が通っているところを区切りとして、通らないところは一まとめ（同時に色が変わる）ということでいいのでしょうか？ いずれにしろ、HTMLの構成と違うのでTableの構成を解釈してグルーピングしないとならないみたいですね。 サンプルです。（動作の解釈が違うかも） ・最初にTableを調べてグルーピングし、各<tr>にclass設定をしています。 ・mouseover、mouseoutで同じグループのcolor属性を変更。 グループ毎にclass定義するなら同時に対応するCSSも作成して、hoverを設定しておくという方法もありますね。（CSSを設定する部分を作成したことがないので、とりあえず、色の変更もスクリプトでという例。） <html> <head> <script type="text/javascript"><!-- firstcolor="#ffffff"; //初めの色 nextcolor="#eeeeee"; //変更後の色 function table_row(table_id){ var cont=1, set=1, elm, rsp, rw; var tr=document.getElementById(table_id).tBodies[0].getElementsByTagName('TR'); for (rw=0; rw<tr.length; rw++){ tr[rw].onmouseover=function(){change(this,nextcolor);}; tr[rw].onmouseout=function(){change(this,firstcolor);}; tr[rw].className="row_class" + cont; elm = tr[rw].firstChild; rsp=1; while (elm){ if (elm.nodeName=='TD'){ rsp =(elm.rowSpan>rsp)?elm.rowSpan:rsp; elm=elm.nextSibling; } } set += rsp-2; if (set<=0){set=1; cont++;} } } function change(e, c){ var cNam=e.className; var tr=e.parentNode; while (tr.nodeName!='TABLE'){ tr=tr.parentNode;} tr=tr.tBodies[0].getElementsByTagName('TR'); for (rw=0; rw<tr.length; rw++) if (tr[rw].className==cNam) tr[rw].style.backgroundColor=c; } // --></script> </head> <body> <table border=1 id="data_table2"> <thead> <tr> <th>No</th><th>DATA1</th><th>DATA2</th><th>DATA3</th> </tr> </thead> <tbody> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td>No</td><td> </td><td rowspan="2"> </td><td> </td> </tr> <tr> <td rowspan="2"> </td><td rowspan="2"> </td><td>DATA</td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td>No</td><td>DATA</td><td>DATA</td><td>DATA</td> </tr> </tbody> </table> <script>table_row("data_table2");</script> </body> </html> 表のrowspanの位置を追加してみてるけど、こういうこと？
その他の回答 (1)
- askaaska
- ベストアンサー率35% (1455/4149)
起きている現象は 頂いたコードを動かしてみて判ったわ。 でも目標がいまいち。 rowspanしている行のある場所は 一度に選択させたいってことなのかしら？ それともrowspanの一部だけ選択とか？ 後者は無茶だけど 前者は実現するとなると 選択対象の行の中に rowspan>1のセルがあるかどうかを確認して あった場合は次の行も選択対象にする、 というロジックを書くことになるわ。 それとももっと別のものを実現しようとしている？
お礼
askaaska様 ありがとうございます。 無事解決しました。 ものすごく参考になりました。 ありがとうございました。
補足
>askaaska様 回答ありがとうございます。 おっしゃるとおりで、rowspanしている行のある場所を一度に選択したいという事です。
お礼
>fujillin様 回答ありがとうございます。 グループ化に解析ですか。勉強になります。 自分のしたいことそのままの物でした。 勉強不足を痛感させられました。 ありがとうございました。