![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
質問させていただきます。
テーブルを作成してマウスオーバーしている行の
バックカラーを変えるプログラムを作成しています。
ですが、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>
No.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の位置を追加してみてるけど、こういうこと?
>fujillin様
回答ありがとうございます。
グループ化に解析ですか。勉強になります。
自分のしたいことそのままの物でした。
勉強不足を痛感させられました。
ありがとうございました。
No.1
- 回答日時:
起きている現象は
頂いたコードを動かしてみて判ったわ。
でも目標がいまいち。
rowspanしている行のある場所は
一度に選択させたいってことなのかしら?
それともrowspanの一部だけ選択とか?
後者は無茶だけど
前者は実現するとなると
選択対象の行の中に
rowspan>1のセルがあるかどうかを確認して
あった場合は次の行も選択対象にする、
というロジックを書くことになるわ。
それとももっと別のものを実現しようとしている?
この回答への補足
>askaaska様
回答ありがとうございます。
おっしゃるとおりで、rowspanしている行のある場所を一度に選択したいという事です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルで複数行をまとめて非...
-
Excelで作ったhtmlファイルのサ...
-
JavaScript 保守性の高いコード...
-
img sec = ""の取得に失敗したとき
-
月間予定表の作り方
-
プルダウンで選択した値によっ...
-
ボタン無しでフォーム内容送信
-
ひ孫に当たるiframe から親ウイ...
-
C言語クイックソートの比較総回...
-
onchangeイベントを強制的に発...
-
EXCEL VBA:IEの操作であるラジ...
-
テキストボックスのグレーアウト
-
fileUploadオブジェクトへの値...
-
クイズ作成:15個の問題から5個...
-
Javascript IEで「識別子があり...
-
イベント発生時に入力待ち状態...
-
テキストエリアをクリックした...
-
名前と名字をそれぞれ比較して...
-
VBSでブラウザ上のテキストボッ...
-
メールフォーム:「必須項目」...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
マウスをブラウザの外に出した...
-
【UWSC】HTML内のある部分を抽...
-
スクロールバーの表示位置を変...
-
クリックされた罫表セルの行番...
-
テーブルの変数について
-
動的なtableの値を取得したい
-
特定の文字列を挿入
-
テーブル内に表示されている数...
-
javascript クリックすると、あ...
-
テーブルの項目の値取得
-
javascriptで質問です。 displa...
-
Tablesorteを2行一組でソートする
-
jspでのArrayListの値の表示
おすすめ情報