• ベストアンサー

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

質問させていただきます。 テーブルを作成してマウスオーバーしている行の バックカラーを変えるプログラムを作成しています。 ですが、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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td> </tr> <tr> <td>No</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td> </tr> <tr> <td rowspan="2">&nbsp;</td><td rowspan="2">&nbsp;</td><td>DATA</td><td>DATA</td> </tr> <tr> <td colspan="2">&nbsp;</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>

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td> </tr> <tr> <td>No</td><td>&nbsp;</td><td rowspan="2">&nbsp;</td><td>&nbsp;</td> </tr> <tr> <td rowspan="2">&nbsp;</td><td rowspan="2">&nbsp;</td><td>DATA</td> </tr> <tr> <td colspan="2">&nbsp;</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の位置を追加してみてるけど、こういうこと？

ryuuzakika
質問者

お礼

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

その他の回答 (1)

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

起きている現象は 頂いたコードを動かしてみて判ったわ。 でも目標がいまいち。 rowspanしている行のある場所は 一度に選択させたいってことなのかしら？ それともrowspanの一部だけ選択とか？ 後者は無茶だけど 前者は実現するとなると 選択対象の行の中に rowspan>1のセルがあるかどうかを確認して あった場合は次の行も選択対象にする、 というロジックを書くことになるわ。 それとももっと別のものを実現しようとしている？

ryuuzakika
質問者

お礼

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

ryuuzakika
質問者

補足

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • テーブルの行の背景色をマウスオーバー時に変えたい

    <table>で表を作成しています。 表の行がマウスオーバーされたときに、その行の背景色が変わるようなページを作っています。 1行ずつなら css の tr:hover で解決しますが、表の中に rowspan を使うとうまくいきません。 下の表があったとします。現在のままだと、 ●A3セルをマウスオーバーすると、B3-2・C3-2セルの背景色が変わらない。 ●B3-2セルをマウスオーバーすると、3・A3・D3セルの背景色が変わらない。 やりたいのは、3 の行全ての背景色を変えたいのです。 ┏━┳━┳━━┳━━┳━┓ ┃行┃Ａ┃ Ｂ ┃ Ｃ ┃Ｄ┃ ┣━╋━╋━━╋━━╋━┫ ┃１┃A1┃ B1 ┃ C1 ┃D1┃ ┣━╋━╋━━╋━━╋━┫ ┃２┃A2┃ B2 ┃ C2 ┃D2┃ ┣━╋━╋━━╋━━╋━┫ ┃ ┃ ┃B3-1┃C3-1┃ ┃ ┃３┃A3┣━━╋━━┫D3┃ ┃ ┃ ┃B3-2┃C3-2┃ ┃ ┣━╋━╋━━╋━━╋━┫ ┃４┃A4┃ B4 ┃ C4 ┃D4┃ ┗━┻━┻━━┻━━┻━┛ 過去に同じような質問があったので試してみましたが、IE以外では動きませんでした。 ↓ http://okwave.jp/qa/q4793130.html CSSのみでやりたかったのですが、JavaScriptを使わないとダメでしょうか？ 色の変更は、できれば CSS で行いたいのです。 質問がわかりづらくてすみません。よろしくお願い致します。 以下サンプルです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>テスト</title> <style type="text/css"> <!-- table.test-01 tr { text-align:center; } table.test-01 thead th { background-color: #32a632; } table.test-01 tbody tr:hover { background-color: #ffddff; } --> </style> </head> <body> <table border="1" cellspacing="0" class="test-01"> <thead> <tr> <th>行</th> <th width="50">A</th> <th width="180">B</th> <th width="60">C</th> <th width="60">D</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>A1</td> <td>B1</td> <td>C1</td> <td>D1</td> </tr> <tr> <td>2</td> <td>A2</td> <td>B2</td> <td>C2</td> <td>D2</td> </tr> <tr> <td rowspan="2">3</td> <td rowspan="2">A3</td> <td>B3-1</td> <td>C3-1</td> <td rowspan="2">D3</td> </tr> <tr> <td>C3-2</td> <td>D3-2</td> </tr> <tr> <td>4</td> <td>A4</td> <td>B4</td> <td>C4</td> <td>D4</td> </tr> </tbody> </table> </body> </html>

    • ベストアンサー
    • HTML
  • テーブルの背景をマウスオーバーで変える

    お世話になります よろしくお願いします phpMyAdminをみてやってみようと思ったのですが テーブルのセルをマウスオーバーで背景の変更はできないでしょうか？ FireFoxだとうまくいくのにIEだとうまくいきません。 IEは未対応と聞いたのですが 実際phpMyAdminでは動いています。 どうやれば一緒のことができるのでしょうか？ phpMyAdminからそれっぽいソースは見つけたのですが うまくいきませんでした <style type="text/css"> /* odd table rows 1,3,5,7,... */ table tr.odd th, table tr.odd { background-color: #CCCCCC; } /* even table rows 2,4,6,8,... */ table tr.even th, table tr.even { background-color: #666666; } /* hovered table rows */ table tr.odd:hover, table tr.even:hover, table tr.odd:hover th, table tr.even:hover th, table tr.hover th, table tr.hover { background-color: #FFF000; } --> </style> <body> <table> <tr class="odd"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> <tr class="even"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> </table> 以上よろしくお願いします

    • ベストアンサー
    • HTML
  • マウスカーソルを乗せた時にテーブルの行の色を変える

    マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて 以下のようにCSSとHTMLを書いてみました。 しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。 【CSS】 table tr:hover { background:red; } 【HTML】 <html> <head> <script type="text/javascript" src="./jquery-1.9.1.js"></script> <link rel="stylesheet" href="test.css" type="text/css"> <script> </script> </head> <body> <table border="1"> <thead> <tr> <th>名前</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td>abc</td> <td>3000</td> </tr> <tr> <td>xyz</td> <td>100</td> </tr> <tr> <td>myk</td> <td>20000</td> </tr> </tbody> </table> </body> </html>

    • ベストアンサー
    • CSS
  • テーブルのレイアウトがおかしくなる

    畏れ入ります。 テーブルを作っているのですが奇妙な現象にあっています。 <table border="1" width="100%"> <tr> <th width="18">&nbsp;</th> <th width="100">&nbsp;</th> <th>&nbsp;</th> <th width="100">&nbsp;</th> </tr> <tr> <td rowspan="2">&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td colspan="3">&nbsp; <!-- ここに　たくさんの　文字列を入れると　・・・　--> </td> </tr> </table> このコメントの部分が無い状態では正常にでていますが、 ここにたくさんの文字列（半角30文字程度でおかしくなります）を投入すると、レイアウトが異常に崩れてしまいます。 文字列は改行してもかまわないのですが テーブル1行目2行目のセルサイズ（width）がこのように変化してしまうと困るのです。 どのようにしたら良いか（width=100の部分を守らせたい） 教えてください。

    • ベストアンサー
    • HTML
  • 2つのテーブルの幅を一致させたい

    以下のHTMLで、2つのテーブルのセル幅が一致しません。 JavaScriptではヘッダのセル幅をボディのセル幅に合わせています。 ボディ部分の文字列をすべて日本語にするとうまくいくのですが・・・ JavaScriptというよりはHtmlの問題な気がしますが、よろしくお願いします。 jqueryを使用しています。 <html> <head> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { headerTableWidthFit(); }); $( window ).resize(function(){ headerTableWidthFit(); }); function headerTableWidthFit() { var i = 0; $('#resultBodyTable table tbody tr:eq(0) td').each(function() { $('#resultHeaderTable table th').eq(i).width($(this).width()); i++; }); } </script> </head> <body> <div id="container"> <div id="resultHeaderTable" class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> <th>お</th> <th>か</th> <th>き</th> <th>く</th> </tr> </thead> </table> </div> <div id="resultBodyTable" class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> <td>お</td> <td>か</td> <td>き</td> <td>く</td> </tr> </tbody> </table> </div> </div> </body> </html>

  • テーブルの背景を変える

    js(外部ファイル)から呼び寄せる方法で１段目と３段目のセルが赤、２段目と４段目のセルが青にする方法 分かりやすくいいますと、奇数が赤、偶数が青になる 方法を教えてもらいたいです。 <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <table border="1"> <col span="6" width="85" align="center"> <th>ID</th> <th >NO</th> <th >Name</th> <th >身長</th> <th>体重</th> <th >その他</th> </table> <table border="1"> <col span="6" width="85" align="center"> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> </tr> </table> </body> </html>

  • javascriptでちゃんと表示されない。

    javascriptの参考書通りに書いてるのになぜか出ません。 なぜか、新製品と価額だけしかでません。 リラックスチェアとか価額４０００とかが出ません。 何が原因かわかりません。 何が原因なんでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>はじめてのHTML</title> <style> table{border:solid 1px orange; border-spacing:0pc;} th,td{border:solid 1px orange; padding:4px;} </style> <script type="text/javascript"> var prod_name={'リラックスチェア','リラックスデスク','ブックスタンド'}; var prod_price ={4000,12000,800}; </script> </head> <body> <h1>新商品価額表</h1> <table> <thead> <tr><th>製品名</th><th>価額</th></tr> </thead> <tbody> <script type="text/javascript"> document.write('<tr>'); document.write('<td>'+ prod_name[0]+'</td>'); document.write('<td>'+ prod_price[0]+'</td>'); document.write('</tr>'); </script> </tbody> </table> </body> </html>

  • jqueryのsortableで行き来自由に

    お世話になります jqueryのsortableでconnectWithを使うことで 別のエリアにソートが可能になりますが すべての要素を別の要素に移動した場合 もとの場所に戻すことが不可能になってしまいます これを可能にするにはどうしたらいいのでしょうか 例として以下のソース AエリアからBエリアに「a」「b」を移動させた後に BエリアからAエリアに戻そうとしても、移動できなくなってしまいます <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>connectWith</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#sortable table tbody").sortable({ connectWith:'#sortable table tbody' }).disableSelection(); }); </script> </head> <body> <div id="sortable"> <!-- エリア A 始まり --> <table width="100%" border="1" cellspacing="10" cellpadding="10"> <thead> <tr> <th>タイトル　エリアA（ここは動かしたくない）</th> </tr> </thead> <tbody> <tr> <td>a</td> </tr> <tr> <td>b</td> </tr> </tbody> </table> <!-- エリア A 終わり --> <!-- エリア B 始まり --> <table width="100%" border="1" cellspacing="10" cellpadding="10"> <thead> <tr> <th>タイトル　エリアB（ここは動かしたくない）</th> </tr> </thead> <tbody> <tr> <td>c</td> </tr> <tr> <td>d</td> </tr> </tbody> </table> <!-- エリア B 終わり --> </div> </body> </html> 対策方法御存知の方 お助け下さいませ！

  • テーブルについて教えてください

    テーブルについて教えてください <table border="1"> <tr> <th colspan="3">見出し</th> </tr> <tr> <th>1</th> <td rowspan="3">A</td> <td rowspan="3">B</td> </tr> <tr> <th>2</th> </tr> <tr> <th>3</th> </tr> </table> |---------------------| |------|---------------| |------|　　　　　　　　　　　　| |------|　　　　　　　　　　　　| |------|--------------| 絵が少しおかしいかも知れませんが・・・上の絵のような感じのテーブル枠になると思います 下の絵のように上の物の一番下にもう一列、縦割していない物を追加したいのですが、どうすればいいでしょうか？ 別に新たにテーブルを作ると切れ目が出来てしまうのでできればそれは避けたいです |---------------------| |------|---------------| |------|　　　　　　　　　　　　| |------|　　　　　　　　　　　　| |------|--------------| |---------------------| よろしくお願いします

    • ベストアンサー
    • HTML
  • tableのヘッダを固定したい

    IE6,7,8でテーブルのヘッダを固定したいのですが うまくいきません。 条件は以下のとおりです。 　・width: ?%として大きさを可変にする。 　・ヘッダを固定する。 　・ボディにはスクロールバーをつける これまでwidthは固定で作成してきたのですが 可変にする場合どのようなcssにすればよいのでしょうか。 よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する