- ベストアンサー
ラジオボタンで指定したテーブルの色変更をする
- ラジオボタンを使用して指定した位置のテーブル内の色を変更するプログラムの組み方を知りたいです。
- 背景色を変更する方法はわかりますが、指定した部分のみ色を変更する方法が分かりません。
- 黄のラジオボタンを選択すると『変更！』の部分が黄色に変わる仕組みを作りたいです。
- yu-tan2828
- お礼率69% (9/13)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<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> こんな感じでどうでしょうか？ 質問の意図を汲み取れてないかも知れません。
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
ラジオボタンの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>
お礼
お返事ありがとうございます。 すぐにお返事いただいたのに遅くなってしまってすみません・・・・ とりあえずちょっとそのままコピーしてみたのですが、 動きませんでした。。 でも何かちょっといじれば動くんですよね・・・(^^;) そういうの、わかるようになりたいです（＞＜） yambejpさんのソースを見て勉強したいと思います。 再度、ありがとうございましたm(_ _)m
お礼
お返事ありがとうございます。 すぐにお返事いただいたのに遅くなってしまってすみません・・・・ 私の意図してた通りでした。 本当にありがとうございましたm(_ _)m