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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 0
この回答へのお礼

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

お礼日時:2009/05/16 08:17

document.bgColor=iro; の部分が背景色を変えているところなので、その対象をお望みのもの(例えばテーブルの背景)となるようにを修正すればよいです。



例示のサイトでは
>スクリプトについての疑問や質問などがある方はQ&Aをご覧下さい。
とありますし、さらには
>▲基礎知識、▲基本操作、▲その他
などの基本的な説明も併設してあるようですので、そちらもご覧になるとよろしいかと思います。

この回答への補足

試行錯誤して以下の状態の、背景ではなく
テーブルに反映させる所までは出来ました。
(JSはコピペ利用ばかりなので、色々間違ってる気がしますが…)

で、id="t1"を付けたテーブルが複数ある場合
1個目(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

このQ&Aに関連する人気のQ&A

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


人気Q&Aランキング