選択したテーブルのセルの背景色を変更させる方法

質問

こんばんは。
現在クイズをcgiで作っており（20問程度）、自分が選択した答えの背景を変化させたいと考えております。

問題はテーブル内に収めています。
↓はcgi内で作成している部分のテーブルサンプルです
<form action="./test.cgi" method="post">
<table width="520" border="1" cellpadding="5" cellspacing="0" class="check" align="right">
<tr>
<td width="420" align="center"><b>$title</b></td>
<td width="100" colspan="2" align="center"><b>回答欄</b></td>
</tr>
<tr>
<td width="420">1．$q3</td>
<td width="50"><input type="radio" name="3" value="1">$a31</td>
<td width="50"><input type="radio" name="3" value="2">$a32</td>
</tr>
<tr>
<td width="420">2．$q4</td>
<td width="50"><input type="radio" name="4" value="1">$a41</td>
<td width="50"><input type="radio" name="4" value="2">$a42</td>
</tr>
<tr>
<td width="420">3．$q5</td>
<td width="50"><input type="radio" name="5" value="1">$a51</td>
<td width="50"><input type="radio" name="5" value="2">$a52</td>
</tr>
<tr>
<td width="10"></td>
<td width="540" align="center">
<input type="hidden" name="action" value="result">
<input type="image" src=".././img/diagnose.gif" border="0">
</td>
</tr>
</table>
</form>

Java Scriptでテーブルのセルにidをふればできると聞き、初心者ながら色々試してみたものの、なかなかうまくいきません。
どなたかご教授お願いいたします。

回答No.3

yambejp · ベストアンサー

＃２です。

とりあえずコンな感じ。
できれば自分で答えを探してみてほしかったです。
（とちゅう配列っぽくつかっているのはわかりやすく
するためのもので、深い意味はありません）

<form>
<table border=1>
<tr><th>タイトル</th><th colspan="4">回答欄</th></tr>
<tr>
<td>第１問</td>
<td id="q[1][1]" colspan="2"><input type="radio" name="1" value="1" onClick="setColor(1,1)">YES</td>
<td id="q[1][2]" colspan="2"><input type="radio" name="1" value="2" onClick="setColor(1,2)">NO</td>
</tr>
<tr>
<td>第２問</td>
<td id="q[2][1]" colspan="2"><input type="radio" name="2" value="1" onClick="setColor(2,1)">YES</td>
<td id="q[2][2]" colspan="2"><input type="radio" name="2" value="2" onClick="setColor(2,2)">NO</td>
</tr>
<tr>
<td>第３問</td>
<td id="q[3][1]" colspan="2"><input type="radio" name="3" value="1" onClick="setColor(3,1)">YES</td>
<td id="q[3][2]" colspan="2"><input type="radio" name="3" value="2" onClick="setColor(3,2)">NO</td>
</tr>
<tr>
<td>第４問</td>
<td id="q[4][1]"><input type="radio" name="4" value="1" onClick="setColor(4,1)">1</td>
<td id="q[4][2]"><input type="radio" name="4" value="2" onClick="setColor(4,2)">2</td>
<td id="q[4][3]"><input type="radio" name="4" value="3" onClick="setColor(4,3)">3</td>
<td id="q[4][4]"><input type="radio" name="4" value="4" onClick="setColor(4,4)">4</td>
</tr>
</table>
<input type="submit" value="send">
</form>
<script language="javascript">
function setColor(num1,num2){
var color='#ffc0c0';
count=1;
while(document.getElementById("q["+num1+"]["+count+"]")!=null){
document.getElementById("q["+num1+"]["+count+"]").style.backgroundColor='';
count++;
}
document.getElementById("q["+num1+"]["+num2+"]").style.backgroundColor=color;
}
</script>

お礼

ありがとうございます。

何でもかんでも聞いてしまい申し訳ありませんでした。
これを機会に、もっと自分でもいろいろと試してみます。

本当にありがとうございます。

回答No.2

yambejp

微妙にあいまいですがこんな感じで？

<form>
<table border=1>
<tr><th>タイトル</th><th colspan=2>回答欄</th></tr>
<tr>
<td>第１問</td>
<td id="q1_yes"><input type="radio" name="1" value="1" onClick="setColor('q1_yes','#ffc0c0');setColor('q1_no' ,'')">YES</td>
<td id="q1_no" ><input type="radio" name="1" value="2" onClick="setColor('q1_no' ,'#ffc0c0');setColor('q1_yes','')">NO</td>
</tr>
<td>第２問</td>
<td id="q2_yes"><input type="radio" name="2" value="1" onClick="setColor('q2_yes','#ffc0c0');setColor('q2_no' ,'')">YES</td>
<td id="q2_no" ><input type="radio" name="2" value="2" onClick="setColor('q2_no' ,'#ffc0c0');setColor('q2_yes','')">NO</td>
</tr>
<td>第３問</td>
<td id="q3_yes"><input type="radio" name="3" value="1" onClick="setColor('q3_yes','#ffc0c0');setColor('q3_no' ,'')">YES</td>
<td id="q3_no" ><input type="radio" name="3" value="2" onClick="setColor('q3_no' ,'#ffc0c0');setColor('q3_yes','')">NO</td>
</tr>
</table>
</form>
<script language="javascript">
function setColor(num,color){
document.getElementById(num).style.backgroundColor=color;
}
</script>

お礼

こんにちは。
早速の返信ありがとうございます。

試したところ、セルがきちんと変更しました。
問４のみ、回答選択肢が４つあり、その背景も個々に変えたいと思っています。
上記のような感じでやればきちんと変更するでしょうか？

回答No.1

BLUEPIXY

スクリプトを別にした方がいいかもしれませんけど、
とりあえず
<td width="50" id="Q1_1" onclick="this.style.backgroundColor='aqua';document.getElementById('Q1_2').style.backgroundColor='white';"><input type="radio" name="3" value="1">$a31</td>
<td width="50" id="Q1_2" onclick="this.style.backgroundColor='aqua';document.getElementById('Q1_1').style.backgroundColor='white';"><input type="radio" name="3" value="2">$a32</td>
みたいな感じでやってけばいいと思います。

お礼

こんにちは。
早速の返信ありがとうございます。

試してみたのですが、上記のままだと何も変更しませんでした。
そこで、
<td width="50" id="Q1_1"><input type="radio" name="3" value="1"onclick="this.style.backgroundColor='aqua';document.getElementById('Q1_2').style.backgroundColor='white';">$a31</td>
としたところ、ラジオボタンの背景が空色に変わりました。

参考にさせていただきます。
どうもありがとうございました。