テーブルの背景色を複数変更する
- テーブルの背景色を複数変更する方法について調べています。
- セル一つならば変更できますが、複数のセルに依存関係があり、依存関係があるセル同士はそのセルにマウスオーバーされると依存関係があるセル全ての色を変更したいと思っています。
- いろいろと探していますが、まだ見つかっていません。
- ベストアンサー
テーブルの背景色を複数変更する
テーブルにて、onMouseOverで背景色を変え、 onMouseOut にて背景色を戻すスクリプトを作っています。 セル一つならば変更できますが、複数のセルに依存関係があり、依存関係があるセル同士はそのセルにマウスオーバーされると依存関係があるセル全ての色を変更したいと思っています。 いろいろと探しているのですが、見つかりません。 以下のようなサンプルで 1 と 4 が一緒に変更できないものでしょうか。 よろしくお願いします。 <html> <head> <title>テーブルの色を変える</title> <script language="JavaScript"> <!-- // b_color(idname,cn); // 背景色を変える // idname: 色変更したいタグid； // cn：色変更法 function b_color(idname,cn) { // alert(idname); // debug alert if (document.getElementById) { document.getElementById(idname).style.backgroundColor = cn; }else{ // alert("あなたのブラウザには対応しておりません。"); } } if (! document.getElementById) { document.write("あなたのブラウザには対応しておりません。マウスを動かしても色は変えられません。<br>"); // マウス移動でいちいちalertが出ると煩わしいので、最初に表示しておく } //--> </script> </head> <body> <table border="1"> <tr> <td id="11" bgcolor="#cccccc" onMouseOver="b_color('11','#ff0000');" onMouseOut="b_color('11','#0000ff');">ここ１</td> <td>ここ２</td> </tr> <tr> <td>ここ３</td> <td id="11" bgcolor="#cccccc" onMouseOver="b_color('11','#ff0000');" onMouseOut="b_color('11','#0000ff');">ここ４</td> </tr> </table> </body> </html>
- moon_night
- お礼率80% (40/50)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
function b_color(idname,cn) { if (document.getElementById) { for ( i=0 ; i < document.all.item(idname).length ; i++ ) { document.all.item(idname, i).style.backgroundColor = cn; } } else { } } こんな感じでいいんじゃないですか？ idがページ上に複数あるときは参照方法が(id,n)となります。
関連するQ&A
- テーブルセルの列での背景色の変更
3行3列のtableで各セルにマウスカーソルをのせた時に そのセルの列すべての背景色を変えるJavaスクリプトを 作成したのですが、うまく動作しません。 どこか間違っているでしょうか。 （たとえば、2-2のセルにマウスカーソルをのせると 1-2、2-2、3-2のセルの背景色をかえるスクリプトです） ●Java function onColor(col) { document.all[col].bgColor = '#00ffff'; } function outColor(col) { document.all[col].bgColor = '#ffffff'; } ●HTML <TABLE BORDER="1" BGCOLOR="#ffffff" cellpadding="0" cellspacing="0"> <colgroup id="a1" span="1" width="25" align="center"> <colgroup id="a2" span="1" width="25" align="center"> <colgroup id="a3" span="1" width="25" align="center"> <tr align="center"> <td onMouseOver="javascript: onColor('a1');" onMouseOut="javascript: outColor('a1');">1-1</td> <td onMouseOver="javascript: onColor('a2');" onMouseOut="javascript: outColor('a2');">1-2</td> <td onMouseOver="javascript: onColor('a3');" onMouseOut="javascript: outColor('a3');">1-3</td> </tr> <tr align="center"> <td onMouseOver="javascript: onColor('a1');" onMouseOut="javascript: outColor('a1');">2-1</td> <td onMouseOver="javascript: onColor('a2');" onMouseOut="javascript: outColor('a2');">2-2</td> <td onMouseOver="javascript: onColor('a3');" onMouseOut="javascript: outColor('a3');">2-3</td> </tr> <tr align="center"> <td onMouseOver="javascript: onColor('a1');" onMouseOut="javascript: outColor('a1');">3-1</td> <td onMouseOver="javascript: onColor('a2');" onMouseOut="javascript: outColor('a2');">3-2</td> <td onMouseOver="javascript: onColor('a3');" onMouseOut="javascript: outColor('a3');">3-3</td> </tr> </TABLE>
- ベストアンサー
- JavaScript
- クリックするとテーブルの列の背景色が変わる／元に戻る
このサイトを参考に以下のサンプルを作りました。 「あるセルをクリックすると、そのセルと依存関係のあるセルすべての背景色を変更する。」 この例でいくと、 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"> </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>
- ベストアンサー
- JavaScript
- 複数の場所（tableの中のｔｄ）の色を変更する
いつもお世話になっています。 以前こちらで質問させて頂き、途中までは解決したのですが （ありがとうございました）、また新たに問題が発生してしまいましたので・・・どなたか助けて下さい（応用がどうしてもできないので ・・・行き詰まってしまいました＞＜） やりたいことはテーブルの各行の上をカーソルが通過すると その行の色が変わる（通過しおわると元の色に戻る）という プログラムをつくりたいのです。。 しかし問題は、一行そのまま色が変わるというのではないことです。 下にソースがありますが、カーソルが『りんご』上にあるときは 『くだもの１』『くだもの２』のセルも一緒に色を変える、また、 『みかん』でも『バナナ』でもカーソルが上を通過してるときは 『くだもの１』『くだもの２』のセルを一緒に色を変える・・・というようにしたいのです（『なす』や『豚肉』達も同じです） 今できているソースだと『みかん』『バナナ』『メロン』のどれも 『くだもの１』しか色が変更されません。 どうすれば『くだもの２』も一緒に色変更されるのでしょうか？ わかりずらい内容でしたらすみません（＞＜） お手数おかけしますがどうかよろしくお願い致します。 ソースは以下になります（前回教えていただいた方のソースを そのまま使用していますm(_ _)m） ※違うプログラムの組み方でも大丈夫です。 <style> .fruit{ background-Color:blue; } .vegetable{ background-Color:green; } .cereal{ background-Color:yellow; } .onmouse{ background-Color:red; color:white; text-decoration:blink; font-weight:bold; } </style> <script Language="JavaScript"> <!-- window.onload=function(){ var trs=document.getElementsByTagName("tr"); var thisClass=""; var classNames=new Array(); for(var i in trs){ if(trs[i].className) classNames[trs[i].className]=true; trs[i].onmouseover=function(){ thisClass=this.className; this.className=this.className+(this.className.indexOf(" onmouse")==-1?" onmouse":""); document.getElementById(thisClass).className="onmouse"; } trs[i].onmouseout=function(){ this.className=this.className.replace(" onmouse",""); document.getElementById(thisClass).className=""; } } for(var j in classNames){ document.getElementById(j).onmouseover=function(){ for(var i in trs){ if(this.id==trs[i].className){ trs[i].className=trs[i].className+(trs[i].className.indexOf(" onmouse")==-1?" onmouse":""); } } } document.getElementById(j).onmouseout=function(){ for(var i in trs){ if(trs[i].className) if(trs[i].className.indexOf(" onmouse")>0){ trs[i].className=trs[i].className.replace(" onmouse",""); } } } } } // --> </script> <body> <table width="300" border="1" cellspacing="0" cellpadding="0"> <tr class="fruit"> <td rowspan="4" id="fruit">くだもの1</td> <td rowspan="4" id="fruit">くだもの2</td> <td>りんご</td> <td> </td> <td> </td> </tr> <tr class="fruit"> <td>みかん</td> <td> </td> <td> </td> </tr> <tr class="fruit"> <td>バナナ</td> <td> </td> <td> </td> </tr> <tr class="fruit"> <td>メロン</td> <td> </td> <td> </td> </tr> <tr class="vegetable"> <td rowspan="2" id="vegetable">野菜1</td> <td rowspan="2" id="vegetable">野菜2</td> <td>なす</td> <td> </td> <td> </td> </tr> <tr class="vegetable"> <td>とまと</td> <td> </td> <td> </td> </tr> <tr class="cereal"> <td rowspan="3" id="cereal">肉1</td> <td rowspan="3" id="cereal">肉2</td> <td>豚肉</td> <td> </td> <td> </td> </tr> <tr class="cereal"> <td>鶏肉</td> <td> </td> <td> </td> </tr> <tr class="cereal"> <td>牛肉</td> <td> </td> <td> </td> </tr> </table> </body> </html> どうぞよろしくお願い致します。
- 締切済み
- JavaScript
- Divの幅指定を無視して子テーブルの幅に合わせて全体が伸びてしまいます
はじめて投稿します。 下のHTMLを表示したとき、menuの部分が狭くなった上に画面自体のスクロールバーが出て横に広がってしまいます。 赤色のテーブルをウィンドウいっぱいに広げた状態で、オレンジ色のテーブルを囲むDIVタグを赤色のテーブルの80%にしたいのです。 オレンジ色テーブルのwidthの80%になっているとか？ でも、オレンジ色のテーブルのwidthがウィンドウに収まるような値なら、意図する表示になるのですが・・・。 どう直したらいいのでしょうか。 <html> <script> function hoge(){ document.getElementById("s1").innerText = "t1=" + document.getElementById("t1").offsetWidth + "*" + document.getElementById("t1").offsetHeight + ",d1=" + document.getElementById("d1").offsetWidth + "*" + document.getElementById("d1").offsetHeight + ",t2=" + document.getElementById("t2").offsetWidth + "*" + document.getElementById("t2").offsetHeight + ",d2=" + document.getElementById("d2").offsetWidth + "*" + document.getElementById("d2").offsetHeight + ",t3=" + document.getElementById("t3").offsetWidth + "*" + document.getElementById("t3").offsetHeight; } </script> <body onload="hoge()"> <span id="s1"></span> <table width="100%" height="95%" border="1" style="background-color:red;" id="t1"> <tr> <td valign="top" width="200px">menu</td> <td valign="top"> <div style="background-color:yellow" id="d1"> <table border="1" style="background-color:blue" width="90%" height="100%" id="t2"> <tr><td>hoge1</td></tr> <tr><td>hoge2</td></tr> <tr> <td> <div style="background-color:pink;overflow:auto;height:80%;width:80%" id="d2"> <table id="t3" width="3250" height="500" style="background-color:orange"> <tr> <td>hoge3</td> </tr> </table> </div> </td> </tr> </table> </div> </td> </tr> </table> </body> </html>
- 締切済み
- HTML
- HTML罫線の行にmouseoverで行全体の背景色を変えるスクリプト
罫線の行<tr>～</tr>に、マウスが乗ると ハイライトされるような仕組みのサンプルプログラム使い、 具体的には、こうして、highlight.htcを呼び出しています。 <tr style='behavior:url(highlight.htc);'> ◆質問◆ ところが、↓のようにすると、 (1) Ａにカーソルを乗せる⇒Ａ、Ｂにハイライト (2) Ｂにカーソルを乗せる⇒Ｂだけにハイライト (3) Ｃにカーソルを乗せる⇒Ｃだけにハイライト となりますが、(1)のケースでもＢだけにハイライトを当てる （＝セルＡにだけは常にハイライトをあてない） ようにするのはどうしたらよいでしょうか。 よろしくお願い致します。 <table> <tr style='behavior:url(highlight.htc);'> <td rowspan="2"></td> <td></td> </tr> <tr style='behavior:url(highlight.htc);'> <td></td> </tr> </table> ┏━┳━┓ ┃ ┃Ｂ┃ ┃Ａ┣━┫ ┃ ┃Ｃ┃ ┗━┻━┛ -----------------------------highlight.htc <script type="text/javascript"> <!-- attachEvent("onmouseover", detailTr_onmouseover); attachEvent("onmouseout", detailTr_onmouseout); function detailTr_onmouseover() { this.style.backgroundColor='#000000'; } function detailTr_onmouseout() { this.style.backgroundColor='transparent'; } --> </script> ------------------------------
- ベストアンサー
- JavaScript
- 元の色に戻すには？
一行おきに青色を付けているテーブルに対して、マウスカーソルを当てた場合、アクティブな行は赤にしたいのですが、 その後、マウスが離れたら元の色に戻したいのですが、 元の色に戻すにはどうすればいいですか？ --------------------------------------------------------- <style type="text/css"> tr.color_Yes{background-color: blue; } </style> <body> <table border=1 id="Active_row_Color"> <tr class="color_Yes"><td>セル1</td><td>セル2</td></tr> <tr><td>セル3</td><td>セル4</td></tr> <tr class="color_Yes"><td>セル5</td><td>セル6</td></tr> <tr><td>セル7</td><td>セル8</td></tr> <tr class="color_Yes"><td>セル9</td><td>セル10</td></tr> </table> --------------------------------------------------------- これで、1行おきにテーブルの行全体が青になります。 さらに --------------------------------------------------------- <script type="text/javascript"> <!-- firstcolor="White"; nextcolor="red"; 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> --------------------------------------------------------- と --------------------------------------------------------- <script>table_row("Active_row_Color")</script> --------------------------------------------------------- を追加することで、マウスカーソルをあてた行が赤になるのですが マウスカーソルが離れると白になってしまいます。 それは --------------------------------------------------------- firstcolor="White"; と tobj.rows[i].onmouseout=function(){this.style.backgroundColor=firstcolor}; --------------------------------------------------------- が原因だと思いますが、 では、もともと青色の行の場合は、マウスカーソルが離れた場合、どうやって青に戻せばいいのでしょうか？ 現在の行の背景色を取得して、それをどこか変数に格納し、元に戻すことは可能ですか？ 添付画像は、一番下の行にマウスカーソルをあてた状態です。
- 締切済み
- JavaScript
- onMouseOverで複数（？）のセル内の色を変更したいとき
はじめまして、こんにちは。 初歩的な質問なので恐縮ですが、、どうしてもわからないのでどなたか教えてください(> <) テーブルの各行の上をカーソルが通過するとその行の色が変わる（通過しおわると元の色に戻る）というのをプログラムを作りたいのです。。 一行ごとでしたらonMouseOver,onMouseoutを使って 簡単にできますが、カーソルが『りんご』の行の上にあるときは『くだもの』のセルも一緒に色を変える、また『みかん』の行の上のときも『くだもの』のセルも一緒に色を変える・・・というように『バナナ』も『メロン』も同じように色変更させたいのです・・・ 説明が下手で大変申し訳ございませんが、どうかよろしくお願い致します。（ジャバスクリプトは勉強を始めたばかり・・・というレベルなのです比較的簡単なソースでお願いします） ソースは下記になります↓ <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td rowspan="4">くだもの</td> <td>りんご</td> <td> </td> <td> </td> </tr> <tr> <td>みかん</td> <td> </td> <td> </td> </tr> <tr> <td>バナナ</td> <td> </td> <td> </td> </tr> <tr> <td>メロン</td> <td> </td> <td> </td> </tr> <tr> <td rowspan="2">野菜</td> <td>なす</td> <td> </td> <td> </td> </tr> <tr> <td>とまと</td> <td> </td> <td> </td> </tr> </table> よろしくお願い致しますm(__)m
- ベストアンサー
- JavaScript
- 条件にあったテーブルのセルを数える
テーブルを作り、それぞれのセルをonmouseoverすると背景が変わるようになっています。そして、背景が変わった後に、何個のセルの背景が変わったのかを知りたいのですが、どうもうまくいきません。alertで確認してもいつも「０」として出てきます。お手数ですが、ご指導お願いします。 <script type="text/javascript"> function bgSwap(TD) { if(window.event.shiftKey == true) { if(TD.style && TD.style.backgroundColor){ TD.style.backgroundColor = ''; } else{ TD.style.backgroundColor = '#000000'; } } } function sendToparent(){ var count=0; var i; var tdname = document.getElementById('F1table').getElementsByTagName('td'); for (i=0; i < tdname.length; i++) { if(tdname[i].style.backgroundColor == "#000000"){ count = count+1; }else { count = count; } } alert(count); } </script> <body> <input type='button' value='set' onclick='sendToparent()'> <table id='F1table' border="0" bordercolor = '#000000' > <tr> <td onmouseover="bgSwap(this)" width="35" height="35"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> </tr> </table> </body>
- 締切済み
- JavaScript
- マウスオーバー時テーブルの背景色を変えているのですが
質問させていただきます。 テーブルを作成してマウスオーバーしている行の バックカラーを変えるプログラムを作成しています。 ですが、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>
- ベストアンサー
- JavaScript
- オンマウスでサムネイル画像のコマ間余白設定について
サムネイル画像にオンマウスにより、拡大画像が表示されるページを作っています。 htmlは勉強中なのですがjavascriptの知識がなくソースを借用しているためカスタマイズ方法がわからずに作業が中断している状態です。 タテに並んでいるサムネイル同士の間に5pxほどの隙間を設けたいのですが、どのようにソースを修正すればよろしいのか、どなたか教えていただけると助かります。 よろしくお願いいたします。 サムネイル画像はsamフォルダに、メイン画像はmainフォルダに入れています。 ページソースを貼り付けておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <LINK href="style.css" rel="stylesheet" type="text/css"> <title></title> </head> <body> <center> <table width="710" cellpadding="0" cellspacing="0"> <tbody> <tr> <td bgcolor="#0000ff" height="50" align="center"><b><font color="#ffffff" size="4">メインタイトル</font></b></td> </tr> <tr> <td bgcolor="#0000ff"><font color="#00ffff" size="2"> ↓のサムネイル画像にマウスポインタを合わせて下さい</font></td> </tr> </tbody> </table> </center> <center> <script type="text/javascript"> <!-- function over( name , comm ) { document.getElementById( "gazou" ).innerHTML = '<img src="' + name + '.JPG">';//画像を表示 document.getElementById( "comment" ).innerHTML = comm;//コメントを表示 document.getElementById("field").style.position="relative";//CSSの相対位置指定 document.getElementById("field").style.top=0+document.body.scrollTop;//イベントが発生したY位置 } function out() { document.getElementById( "gazou" ).innerHTML =document.getElementById( "comment" ).innerHTML = ''; } //--> </script> <table> <tbody> <tr> <td width="100"> <img src="sum/001.jpg" target="_top" onmouseover="over('main/001','');" onmouseout="out();"><br> <img src="sum/002.jpg" target="_top" onmouseover="over('main/002','');" onmouseout="out();"><br> <img src="sum/003.jpg" target="_top" onmouseover="over('main/003','');" onmouseout="out();"><br> <img src="sum/004.jpg" target="_top" onmouseover="over('main/004','');" onmouseout="out();"><br> <img src="sum/005.jpg" target="_top" onmouseover="over('main/005','');" onmouseout="out();"><br> </td> <td valign="top" width="600"> <table id="field"> <tbody> <tr> <td id="gazou"></td> </tr> <tr> <td id="comment" class="com"></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </center> </body> </html>
- ベストアンサー
- JavaScript
お礼
仰るとおりにやったらできました。 ありがとうございました！