- ベストアンサー
ポップアップメニューでテーブル背景色変更
- ポップアップメニューでテーブルの背景色を変更する方法がわかりません。
- http://www.west-mira.jp/javascript/html/4/10/lib_color/bgcolor8/ で配布されているスクリプトを使用して、テーブルの背景色ではなくテーブル自体の背景色を選択した色に変更したいです。
- 他のスクリプトでポップアップメニューの各項目の背景色を選択し、さらにテーブル自体の背景色も変更するものがあれば教えてください。
- saw666
- お礼率24% (6/25)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
document.bgColor=iro; の部分が背景色を変えているところなので、その対象をお望みのもの（例えばテーブルの背景）となるようにを修正すればよいです。 例示のサイトでは ＞スクリプトについての疑問や質問などがある方はQ&Aをご覧下さい。 とありますし、さらには ＞▲基礎知識、▲基本操作、▲その他 などの基本的な説明も併設してあるようですので、そちらもご覧になるとよろしいかと思います。
補足
試行錯誤して以下の状態の、背景ではなく テーブルに反映させる所までは出来ました。 （JSはコピペ利用ばかりなので、色々間違ってる気がしますが…） で、id="t1"を付けたテーブルが複数ある場合 １個目（no.1）のテーブルにしか反映されないのですが… これを、id="t1"要素のあるテーブル全て（no.2、no.3～）に 反映させるには、どうすればよいのでしょうか？ 御教示頂けれると助かります。 どなたか宜しくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script language="JavaScript"> <!--//Copyright (C) WEST MiRa http://www.west-mira.jp ColorsRgb=new Array(); ColorsName=new Array(); //1番目の色の値を指定（色名、もしくはRGB値で） ColorsRgb[0]='black'; //1番目の色の名前を指定 ColorsName[0]='黒色'; //2番目の色の値を指定（色名、もしくはRGB値で） ColorsRgb[1]='gray'; //2番目の色の名前を指定 ColorsName[1]='灰色'; //3番目の色の値を指定（色名、もしくはRGB値で） ColorsRgb[2]='silver'; //3番目の色の名前を指定 ColorsName[2]='銀色'; //ポップアップメニューの項目で背景色を変更する BgFlag=1; function BgColorChange(t1) { iro=document.form1.sele1.selectedIndex; iro=document.form1.sele1.options[iro].value; document.getElementById('t1').style.backgroundColor=iro; } //--> </script> </head> <body> <form name="form1"> <select name="sele1" onChange="BgColorChange();"> <option> <script language="JavaScript"> <!--//Copyright (C) WEST MiRa http://www.west-mira.jp BgMoji=''; for(i=0; i<ColorsRgb.length; i++) { BgMoji='\t<option value="' + ColorsRgb[i] + '"'; if(BgFlag == 1)BgMoji+=' style="background-color:' + ColorsRgb[i] + '"'; BgMoji+='>' + ColorsName[i]; document.write(BgMoji); } //--> </script> </select> </form> ・ ・ ・ <br> <br> <table width="200" border="1" cellspacing="0" cellpadding="0" height="100" id="t1"> <tr> <td align="center" width="100">no.1</td> <td align="center" width="100"> </td> </tr> </table> <br> <table width="200" border="1" cellspacing="0" cellpadding="0" height="100" id="t1"> <tr> <td align="center" width="100">no.2</td> <td align="center" width="100"> </td> </tr> </table> <p> </p> </body></html>
お礼
お手を煩わせてすみません。 理想通りの表示になりました、有り難う御座いました。