重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

マウスオーバー時テーブルの背景色を変えているのですが

解決済

  • 質問者：ryuuzakika
  • 質問日時：
  • 回答数：2件

質問させていただきます。
テーブルを作成してマウスオーバーしている行の
バックカラーを変えるプログラムを作成しています。
ですが、rowspanを使用すると、rowspanが別の行
扱いになり、バックカラーが変えられなくなってしまいました。
一緒にしたい場合どうしたら良いでしょうか。
もしわかりましたらご教授下さい。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

横の罫が通っているところを区切りとして、通らないところは一まとめ（同時に色が変わる）ということでいいのでしょうか？


いずれにしろ、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の位置を追加してみてるけど、こういうこと？
    • good
    • 0
    • 件
通報する
この回答へのお礼

>fujillin様
回答ありがとうございます。
グループ化に解析ですか。勉強になります。
自分のしたいことそのままの物でした。
勉強不足を痛感させられました。
ありがとうございました。

通報する
お礼日時：2009/03/13 19:05

No.1

  • 回答者： askaaska
  • 回答日時：

起きている現象は


頂いたコードを動かしてみて判ったわ。
でも目標がいまいち。
rowspanしている行のある場所は
一度に選択させたいってことなのかしら？
それともrowspanの一部だけ選択とか？

後者は無茶だけど
前者は実現するとなると
選択対象の行の中に
rowspan>1のセルがあるかどうかを確認して
あった場合は次の行も選択対象にする、
というロジックを書くことになるわ。

それとももっと別のものを実現しようとしている？

この回答への補足

>askaaska様

回答ありがとうございます。
おっしゃるとおりで、rowspanしている行のある場所を一度に選択したいという事です。

補足日時：2009/03/13 14:36
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

askaaska様
ありがとうございます。
無事解決しました。
ものすごく参考になりました。
ありがとうございました。

通報する
お礼日時：2009/03/13 19:07

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報