• ベストアンサー

マウスクリックするたびにテーブルの行全体の背景を着色/着色解除

1行目をクリックすると行全体（「1」か「あああ」か「東京」のセル）が 黄緑に着色され、もう１回クリックすと着色が解除されるようにするには どうしたらいいでしょうか？ <table> <tr> <td>1</td> <td>あああ</td> <td>東京</td> </tr> <tr> <td>2</td> <td>いいい</td> <td>神奈川</td> </tr> <tr> <td>3</td> <td>ううう</td> <td>千葉</td> </tr> </table>

回答 全件
ベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD …

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

  • ベストアンサー
回答No.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>クリックしたTDの背景を塗りつぶす</title> <style type="text/css"> .kimidori { background-color:#cf0; } </style> <table summary="実験用の表です"> <tr><td>1</td><td>あああ</td><td>東京</td></tr> <tr><td>2</td><td>いいい</td><td>神奈川</td></tr> <tr><td>3</td><td>ううう</td><td>千葉</td></tr> </table> <script type="text/javascript"> document.onclick = function (evt) { var e = evt ? evt.target: event.srcElement,c = 0, cols, o; if (/TD|TH/.test(e.nodeName)) while (o = e.parentNode.cells[c++]) o.className = o.className ? '': 'kimidori'; } </script>

litton101
質問者

お礼

babu_babooさん、速攻のご回答ありがとうございました。 早速組み込んでみましたが、実装も簡単で、すばらしいです。 今後もすごく重宝しそうです。 永久保存版にさせていただきます！ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 行クリックでチェックボックスをOn/Off、行全体を着色などさせたい

    以下のように、１行に１チェックボックスがあります。 　(1) 各行のどこかをクリックするたびにチェックボックスのON/OFFを切り替え 　(2) チェックボックスがONである間は、行全体の背景を黄色に塗りつぶす 　　　　（チェックが解除されたら黄色着色も解除） といった動作をさせたいのですが、記述方法をご教示いただけますと幸いです。 <table> 　<tr> 　　　<td>1</td> 　　　<td>東京</td> 　　　<td><input type="checkbox" name="myvalue" value="1"></td> 　</tr> 　<tr> 　　　<td>2</td> 　　　<td>神奈川</td> 　　　<td><input type="checkbox" name="myvalue" value="2"></td> 　</tr> 　<tr> 　　　<td>3</td> 　　　<td>千葉</td> 　　　<td><input type="checkbox" name="myvalue" value="3"></td> 　</tr> </table>

  • クリック時、テーブルの行全体を色づけするには？

    テーブル上でクリックされたら、その行全体を色づけするようにしています。 一見問題なく動作するのですが、ボタンやアンカーなどが含まれたセルがあると、そこだけ色付けができません。 そのセルを一度もクリックしない間は良いのですが、一度でもクリックすると、その後は色づけされません。 セルの中身に関わらず、選択行全体が色づけできるようにするには、どうすればよいでしょうか？ IE6での現象です。 ご回答よろしくお願いします。 【HTML部分】 <table> <tr onclick="rowsSelect()"> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td><input type="button" value="子画面" onclick="window.open();"></td> </tr> <tr onclick="rowsSelect()"> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td><input type="button" value="子画面" onclick="window.open();"></td> </tr> <tr onclick="rowsSelect()"> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td><input type="button" value="子画面" onclick="window.open();"></td> </tr> </table> 【JavaScript部分】 var selRow; function rowsSelect() { var r = event.srcElement.parentElement; if(selRow!=null){ selRow.style.backgroundColor="#FFFFFF"; } selRow=r; r.style.backgroundColor="#FFDAB3"; }

  • クリックするとテーブルの列の背景色が変わる／元に戻る

    このサイトを参考に以下のサンプルを作りました。 「あるセルをクリックすると、そのセルと依存関係のあるセルすべての背景色を変更する。」 この例でいくと、 1.セルA1,A2のどれをクリックしても、列Aすべての色が変わる。 2.セルB1,B2のいずれかをクリックすると、列Aは元の色に戻り、列Bすべての色が変わる という動きを実現したいです。 2.機能を実現するにはどのようにすればよいのか、どなたかご存知の方ご教授のほどよろしくお願いいたします。 現時点のサンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>テーブルの列の背景色を変える</title> <SCRIPT language="JavaScript"> <!-- function bgcolor(idName){ for ( i=0 ; i < document.all.item(idName).length ; i++ ) { document.all.item(idName, i).style.backgroundColor = "#EE3300"; } } //--> </SCRIPT> </head> <body> <TABLE border="1"> <TR> <TD width="30">&nbsp;</TD> <TD width="30">列A</TD> <TD width="30">列B</TD> <TD width="30">列C</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行1</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A1</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B1</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C1</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行2</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A2</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B2</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C2</TD> </TR> </TABLE> </body> </html>

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

    <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
  • クリックされた罫表セルの行番号、列番号を取得するには

    クリックされた罫表セルの行番号、列番号を取得する事は出来るのでしょうか。 例えば　下記Tableの"き"という文字が入ったセルをクリックすると 列番号:2 行番号:3　という番号を取得したいのです。 <table> <thead><tr><th>１</th><th>２</th><th>３</th><th>４</th></tr></thead> <tbody> <tr td>あ</td><td>い</td><td>う</td><td>え</td></tr> <tr><td>お</td><td>か</td><td>き</td><td>く</td></tr> <tr><td>け</td><td>こ</td><td>さ</td><td>し</td></tr> <tr><td>す</td><td>せ</td><td>そ</td><td>な</td></tr> </tbody> </table> onclickでidのついた所をクリックした時のアクションは取得できましたが、Csvなどからデータを取得したtableのセルをクリックした時の 列数、行数を取得する事は可能でしょうか。 宜しくお願いします。

  • テーブルの背景をマウスオーバーで変える

    お世話になります よろしくお願いします 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
  • DHTMLでテーブルの行の表示・非表示を切り替える。

    こんにちは。 WEBアプリケーションのモックアップを作成しています。 自身はJava屋ですが、DHTMLに明るくないため、苦戦しています。 同一画面内のリンクがクリックされた場合に・・・ テーブルの行の表示、非表示を切り替えたいのです。 <!-- ========================= --> <!-- テーブル１ --> <table border="1"> <tr> <td>ヘッダ１</td> <td>ヘッダ２</td> </tr> <!-- ☆☆☆ ここから ☆☆☆ --> <tr> <td>111</td> <td>aaa</td> </tr> <tr> <td>222</td> <td>bbb</td> </tr> <!-- ☆☆☆ ここまで消したい ☆☆☆ --> </table> <!-- テーブル２ --> <table border="1"> <tr> <td>ヘッダA</td> <td>ヘッダB</td> </tr> <tr> <td>あああ</td> <td>いいい</td> </tr> </table> <!-- ========================= --> <tr>タグを<div>タグで囲んで、styleでhidden、visibleを切り替えようと考えましたが、<tr>に<div>タグが使えない事を知りました。 そこで、テーブル１を大きくテーブルで囲み、ヘッダとボディ部をセルに入れて、セルの表示・非表示を切り替えました。 これは上手くいったのですが、非表示にした場合、テーブル２との間は詰まるようにしたいのですが、もともと表示されていた分のスペースが出来てしまいました。 あまり、ロジックを組み込まずに作ろうと考えているのですが、上手い方法が思いつきません。 何か良い方法がありましたら、ご教授願います。 ターゲットのブラウザは… IE5.5～IE7 です。

    • ベストアンサー
    • 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>

  • テーブル行のクリックでチェックボックスの制御

    テーブル行をクリックしたときにその行にあるチェックボックスのON/OFFを 制御したいと思います。 Jqueryで以下サンプルを作成してみました。該当行をクリックするとチェックボックスが ONになったりOFFになったりするのですがチェックボックス自体をクリックするとうまく チェックがONになりません。恐らくチェックボックスをクリックした時はONになっていて、 同時に行をクリックしたとみなされONになっているチェックボックスをOFFにしているのでは ないかと思われます。 チェックボックスをクリックしてもON/OFFがうまくいくようにするためにはどうすればよろしいでしょうか 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#nameTable tr").click(function() { //alert($(data).find(":checkbox").val()); var chk = $(this).find(":checkbox"); if(chk.prop("checked")) { chk.attr("checked", false); } else { chk.attr("checked", true); } }); }); </script> <title>CSS</title> <style type="text/css"> </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <table id="nameTable" border="1"> <tr><th>名前</th><th>チェックボックス</th></tr> <tr><td>あいうえお</td><td><input type="checkbox" value="1"></td></tr> <tr><td>かきくけこ</td><td><input type="checkbox" value="2"></td></tr> <tr><td>さしすせそ</td><td><input type="checkbox" value="3"></td></tr> <tr><td>たちつてと</td><td><input type="checkbox" value="4"></td></tr> <tr><td>なにぬねの</td><td><input type="checkbox" value="5"></td></tr> </table> </body> </html>

  • tableとpreでできる空の行を消す

    下の空の行を消すスタイルとかないですか？ <table border><tr><td><pre>あ</pre></td></tr></table>

    • ベストアンサー
    • HTML
既婚者との関係に悩む私の心情
このQ&Aのポイント
  • 既婚者との関係に悩む私の心情を探る
  • 既婚者との関係の複雑さと私の心の葛藤
  • 既婚者との関係に迷いが生まれる私の心の探求
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する