ラジオボタンで指定したテーブルの色変更をする

解決済

質問者：yu-tan2828
質問日時：2007/09/24 17:44
回答数：2件

こんにちは、初めまして。一人では解決できないので・・・どなたか教えてください（＞＜）よろしくお願い致します。

やりたいことは、ラジオボタンで指定した部分のテーブル内のみ色を変更するということです。背景色を変更するというやり方はわかるのですが、指定した位置のみ色を変更するというプログラムの組み方がわかりません・・・近いサンプルなどあったのでいじってみたのですが、応用ができないみたいで、、意図した通りの動きにすることはできませんでした。。
ほんとに初歩的な質問でもうしわけございませんが、どなたかよろしくお願い致しますm(_　_)m
ソースは以下になります。

※黄のラジオボタンを選択すると『変更！』の部分が黄色に変更し、黒のラジオボタンを選択すると『変更！』の部分が黒色に変更する・・・（他の色も同じ動きです）という感じです。

<table width="240" height="104" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="238" height="32">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10%" style="padding-left:3px;" align="left">
<input name="radiobutton" type="radio" value="radiobutton" checked="checked" />
</td>
<td width="9%" align="left">白</td>
<td width="11%" style="padding-left:3px;">
<input name="radiobutton" type="radio" value="radiobutton" />
</td>
<td width="9%">黄</td>
<td width="11%" style="color:#FF0000; padding-left:3px;">
<input name="radiobutton" type="radio" value="radiobutton" />
</td>
<td width="9%">黒</td>
<td width="11%" style="padding-left:3px;">
<input name="radiobutton" type="radio" value="radiobutton" />
</td>
<td width="9%">赤</td>
<td width="10%" style="padding-left:3px;">
<input name="radiobutton" type="radio" value="radiobutton" />
</td>
<td width="9%">黄</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="72">
<table width="98%" height="62" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="top">変更！</td>
</tr>
</table>
</td>
</tr>
</table>

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： mizuno3
回答日時：2007/09/24 21:53

<table width="240" height="104" border="0" cellspacing="0" cellpadding="0">

<tr>
<td width="238" height="32">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10%" style="padding-left:3px;" align="left">
<input name="radiobutton" type="radio" value="radiobutton" checked="checked" onclick="document.getElementById('changeTableID').style.backgroundColor='#FFFFFF'" />
</td>
<td width="9%" align="left">白</td>
<td width="11%" style="padding-left:3px;">
<input name="radiobutton" type="radio" value="radiobutton" onclick="document.getElementById('changeTableID').style.backgroundColor='#FFFF00'" />
</td>
<td width="9%">黄</td>
<td width="11%" style="color:#FF0000; padding-left:3px;">
<input name="radiobutton" type="radio" value="radiobutton" onclick="document.getElementById('changeTableID').style.backgroundColor='#000000'" />
</td>
<td width="9%">黒</td>
<td width="11%" style="padding-left:3px;">
<input name="radiobutton" type="radio" value="radiobutton" onclick="document.getElementById('changeTableID').style.backgroundColor='#FF0000'" />
</td>
<td width="9%">赤</td>
<td width="10%" style="padding-left:3px;">
<input name="radiobutton" type="radio" value="radiobutton" onclick="document.getElementById('changeTableID').style.backgroundColor='#FFFF00'" />
</td>
<td width="9%">黄</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="72">
<table id="changeTableID" width="98%" height="62" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="top">変更！</td>
</tr>
</table>
</td>
</tr>
</table>

こんな感じでどうでしょうか？
質問の意図を汲み取れてないかも知れません。

- 0
- 件

通報する

この回答へのお礼

お返事ありがとうございます。
すぐにお返事いただいたのに遅くなってしまってすみません・・・・

私の意図してた通りでした。
本当にありがとうございましたm(_ _)m

通報する

お礼日時：2007/09/25 22:51

No.2

回答者： yambejp
回答日時：2007/09/24 22:51

ラジオボタンのvalueに一律でradiobuttonという値をいれていますが

これでは意味がなので個々の色のデータをいれましょう。
共通箇所が多いのでヘッダでscriptをまとめてしまうと見やすくなります。

<html>
<head>
<script language=javascript>
window.onload=function(){
var changeArea=document.getElementById("changeArea");
var radios=document.getElementsByTagName("input");
for(var i in radios){
if(radios[i].type=="radio" && radios[i].name=="radiobutton"){
radios[i].onclick=function(){
changeArea.style.backgroundColor=this.value;
}
}
}
}
</script>
</head>
<body>
<table width="240" height="104" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="238" height="32">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10%" style="padding-left:3px;" align="left">
<input name="radiobutton" type="radio" value="#ffffff" checked="checked" id="white"/>
</td>
<td width="9%" align="left"><label for="white">白</label></td>
<td width="11%" style="padding-left:3px;">
<input name="radiobutton" type="radio" value="#ffff00" id="yellow" />
</td>
<td width="9%"><label for="yellow">黄</label></td>
<td width="11%" style="color:#FF0000; padding-left:3px;">
<input name="radiobutton" type="radio" value="#000000" id="black" />
</td>
<td width="9%"><label for="black">黒</lable></td>
<td width="11%" style="padding-left:3px;">
<input name="radiobutton" type="radio" value="#ff0000" id="red" />
</td>
<td width="9%"><label for="red">赤</label></td>
<td width="10%" style="padding-left:3px;">
<input name="radiobutton" type="radio" value="#008000" id="green" />
</td>
<td width="9%"><label for="green">緑</label></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="72">
<table width="98%" height="62" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="top" id="changeArea">変更！</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

お返事ありがとうございます。
すぐにお返事いただいたのに遅くなってしまってすみません・・・・

とりあえずちょっとそのままコピーしてみたのですが、
動きませんでした。。
でも何かちょっといじれば動くんですよね・・・(^^;)
そういうの、わかるようになりたいです（＞＜）
yambejpさんのソースを見て勉強したいと思います。
再度、ありがとうございましたm(_ _)m

通報する

お礼日時：2007/09/25 22:45

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