こんばんは。
現在クイズを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.1
- 回答日時:
スクリプトを別にした方がいいかもしれませんけど、
とりあえず
<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>
としたところ、ラジオボタンの背景が空色に変わりました。
参考にさせていただきます。
どうもありがとうございました。
No.2
- 回答日時:
微妙にあいまいですがこんな感じで?
<form>
<table border=1>
<tr><th>タイトル</th><th colspan=2>回答欄</th></tr>
<tr>
<td>第1問</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>第2問</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>第3問</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>
こんにちは。
早速の返信ありがとうございます。
試したところ、セルがきちんと変更しました。
問4のみ、回答選択肢が4つあり、その背景も個々に変えたいと思っています。
上記のような感じでやればきちんと変更するでしょうか?
No.3ベストアンサー
- 回答日時:
#2です。
とりあえずコンな感じ。
できれば自分で答えを探してみてほしかったです。
(とちゅう配列っぽくつかっているのはわかりやすく
するためのもので、深い意味はありません)
<form>
<table border=1>
<tr><th>タイトル</th><th colspan="4">回答欄</th></tr>
<tr>
<td>第1問</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>第2問</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>第3問</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>第4問</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>
ありがとうございます。
何でもかんでも聞いてしまい申し訳ありませんでした。
これを機会に、もっと自分でもいろいろと試してみます。
本当にありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Formのシリアライズができない
-
複数のselect値で1つも選択され...
-
javascriptで表(テーブル)の自...
-
return trueとreturn falseの用...
-
追加ボタンを押した際に ok ボ...
-
チェックボックスのON/OFFでVal...
-
<form action="#">の意味とは?
-
jQuery セレクトボックスで選択...
-
フォームが空欄の時にフォーム...
-
【jQuery】input nameの文字列...
-
新しくフォルダを作成したい
-
javascriptの値をformのinput h...
-
正規表現で複数マッチ条件で悩...
-
マイナスなら赤字で表示したい...
-
チェックボックスの設定
-
ラジオボタンでポップアップメ...
-
javascriptで画像の移動
-
特定<table>内の<td>の色を変える
-
テーブルで複数行をまとめて非...
-
子ウィンドウを閉じるとき、親...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptの「.querySelectorA...
-
複数のselect値で1つも選択され...
-
チェックボックス付きのテーブ...
-
ラジオボタンが選択されたらテ...
-
入力チェックの外部スクリプト...
-
Javascriptの電卓で最初の何も...
-
文字数を数える際に空白、改行...
-
画面の2重起動をチェックする...
-
画面表示とともにtableの指定の...
-
jQueryで合計を出したい
-
localStorageでのcheckbox制御
-
JavaScriptによる自動計算フォーム
-
同一nameの input type="text"...
-
テーブル内のチェックボックス...
-
formで項目を連結したい
-
クリックしたラジオボタンの行...
-
Javascriptで自動計算の合計の...
-
ラジオボタンを一括で操作する...
-
送信ボタン連打を抑止したいです
-
ボタン押下すると一行テキスト...
おすすめ情報