プロが教える店舗＆オフィスのセキュリティ対策術

ポップアップメニューでテーブル背景色変更

解決済

  • 質問者：saw666
  • 質問日時：
  • 回答数：2件

http://www.west-mira.jp/javascript/html/4/10/lib …
上記URLで配布されているスクリプトで
選択したカラーを【背景】ではなく【テーブル】に反映させたいのですが
具体的な記述方法が解りません。
どなたか改造をお願い出来ないでしょうか？（※改造OKのスクリプトです）

上記スクリプトを使いたい理由は
・ポップアップメニューの各項目に背景色が表示される
・ポップアップメニューで背景色を選択出来る
の２点です。
なので、もし他に、この２点＋【テーブルに反映】されるスクリプトが
ありましたら教えて下さい。

どうか宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1

  • 回答者： fujillin
  • 回答日時：

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>

補足日時：2009/05/15 11:16
通報する
    • good
    • 0
    • 件
通報する

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

お手を煩わせてすみません。
理想通りの表示になりました、有り難う御座いました。

通報する
お礼日時：2009/05/16 08:17

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報