- ベストアンサー
ポップアップメニューでテーブル背景色変更
- ポップアップメニューでテーブルの背景色を変更する方法がわかりません。
- http://www.west-mira.jp/javascript/html/4/10/lib_color/bgcolor8/ で配布されているスクリプトを使用して、テーブルの背景色ではなくテーブル自体の背景色を選択した色に変更したいです。
- 他のスクリプトでポップアップメニューの各項目の背景色を選択し、さらにテーブル自体の背景色も変更するものがあれば教えてください。
- saw666
- お礼率24% (6/25)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
idは基本的に個別のものでなければならないので、重複して同じidを設けるのは不可です。 かわりにclassを利用して、class="t1"と指定することにしましょう。 （class="t1"でないものの背景色がかわりません） オプションをセットする部分をオリジナルからまったく変えてしまいましたが… <html> <head> <script language="JavaScript"> <!-- window.onload = function(){ var col, colN, count, i, elm; col = 'white,gray,black,silver,maroon,red,purple,fuchsia,green,lime,olive,yellow,navy,blue,teal,aqua'.split(','); colN = '白色,灰色,黒色,銀色,茶色,赤色,紫色,ピンク,緑色,ライム,オリーブ,黄色,紺色,青色,青緑,水色'.split(','); elm = document.getElementById('sel1'); count = col.length>colN.length?colN.length:col.length; for (i=0; i<count; i++) { elm.options[i] = new Option(colN[i],col[i]); elm.options[i].style.backgroundColor = col[i]; } } function BgChange(e) { var col = e.options[e.selectedIndex].value; var tbl = document.getElementsByTagName('TABLE'); for (var i=0; i<tbl.length; i++){ if (tbl[i].className=='t1') tbl[i].style.backgroundColor=col; } } //--> </script> </head> <body> <select name="sele1" id="sel1" onChange="BgChange(this);"> </select> <p> <table width="200" border="1" cellspacing="0" cellpadding="0" height="100" class="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"> <tr> <td align="center" width="100">no.2</td> <td align="center" width="100"> </td> </tr> </table> <br> <table width="200" border="1" cellspacing="0" cellpadding="0" height="100" class="t1"> <tr> <td align="center" width="100">no.3</td> <td align="center" width="100"> </td> </tr> </table> </body> </html>
その他の回答 (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>
お礼
お手を煩わせてすみません。 理想通りの表示になりました、有り難う御座いました。