- ベストアンサー
複数のテーブルをラジオボタンで背景を変える
javascriptは、まだ全くの初心者で色々探しながら勉強しています。 過去の質問で動作が似ているものがあったのですが、 複数のテーブルに使えるように変更したいのですが 全くやり方が分かりません。 宜しくお願い致します。 ２つのテーブルがあります。 id=AAA と言うテーブルは、今日の天気のラジオボタン id=BBB と言うテーブルは、今日の花粉のラジオボタン だとします。 各テーブル内のラジオボタンが選択されたら、 そのテーブルだけに影響するセルの色変更。 つまり、 AAAのテーブル内のラジオボタン選択時は、AAAのセルの色を黄 BBBのテーブル内のラジオボタン選択時は、BBBのセルの色を赤 にしたいのです。 下記にサンプルコードを書きました。 これだと、AAAのテーブルのラジオボタンをクリックすると BBBのテーブルの背景色がクリアされてしまいます。 どうやって引数を渡していいのか分かりません。 宜しくお願い致します。 <html> <head> <title>test</title> <script type="text/javascript"> <!-- var saveTr; function setBg(rd) { if(saveTr) saveTr.bgColor="white"; saveTr=rd.parentNode.parentNode; saveTr.bgColor="yellow"; } --> </script> </head> <body> <table id='AAA'> <tr><td> 今日の天気 </td></tr> <tr><td> <input type='radio' name='tenki' value='1' onClick="setBg(this);">晴れ<br> </td></tr> <tr><td> <input type='radio' name='tenki' value='2' onClick="setBg(this);">曇り<br> </td></tr> <tr><td> <input type='radio' name='tenki' value='3' onClick="setBg(this);">雨<br> </td></tr> </table> <br> <table id='BBB'> <tr><td> 花粉の量 </td></tr> <tr><td> <input type='radio' name='kafun' value='1' onClick="setBg(this);">多い<br> </td></tr> <tr><td> <input type='radio' name='kafun' value='2' onClick="setBg(this);">普通<br> </td></tr> <tr><td> <input type='radio' name='kafun' value='3' onClick="setBg(this);">少ない<br> </td></tr> </table> </body> </html>
- mintohime
- お礼率67% (36/53)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
AAAのテーブルとBBBのテーブルでそれぞれ別の色を背景色にするのであれば、下記のようにAAAテーブル用の関数、BBBテーブル用の関数に分けた方がいいですよ。 <html> <head> <title>test</title> <script type="text/javascript"> <!-- var saveTr1, saveTr2; function setBg1(rd) { if(saveTr1) saveTr1.bgColor="white"; saveTr1=rd.parentNode.parentNode; saveTr1.bgColor="yellow"; } function setBg2(rd) { if(saveTr2) saveTr2.bgColor="white"; saveTr2=rd.parentNode.parentNode; saveTr2.bgColor="red"; } --> </script> </head> <body> <table id='AAA'> <tr><td> 今日の天気 </td></tr> <tr><td> <input type='radio' name='tenki' value='1' onClick="setBg1(this);">晴れ<br> </td></tr> <tr><td> <input type='radio' name='tenki' value='2' onClick="setBg1(this);">曇り<br> </td></tr> <tr><td> <input type='radio' name='tenki' value='3' onClick="setBg1(this);">雨<br> </td></tr> </table> <br> <table id='BBB'> <tr><td> 花粉の量 </td></tr> <tr><td> <input type='radio' name='kafun' value='1' onClick="setBg2(this);">多い<br> </td></tr> <tr><td> <input type='radio' name='kafun' value='2' onClick="setBg2(this);">普通<br> </td></tr> <tr><td> <input type='radio' name='kafun' value='3' onClick="setBg2(this);">少ない<br> </td></tr> </table> </body> </html>
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
こんな感じでどうでしょ？ <html> <head> <title>test</title> <script type="text/javascript"> function setBg(rd) { var p=rd.parentNode; while(p){ if(p.nodeName=="TR") var tr=p; if(p.nodeName=="TABLE"){ var trs=p.getElementsByTagName("tr"); break;} p=p.parentNode; } for(var i=0;i<trs.length;i++){ trs[i].style.backgroundColor="inherit"; } tr.style.backgroundColor="yellow"; } </script> </head> <body> <table id='AAA'> <tr><td> 今日の天気 </td></tr> <tr><td> <input type='radio' name='tenki' value='1' onClick="setBg(this);">晴れ<br> </td></tr> <tr><td> <input type='radio' name='tenki' value='2' onClick="setBg(this);">曇り<br> </td></tr> <tr><td> <input type='radio' name='tenki' value='3' onClick="setBg(this);">雨<br> </td></tr> </table> <br> <table id='BBB'> <tr><td> 花粉の量 </td></tr> <tr><td> <input type='radio' name='kafun' value='1' onClick="setBg(this);">多い<br> </td></tr> <tr><td> <input type='radio' name='kafun' value='2' onClick="setBg(this);">普通<br> </td></tr> <tr><td> <input type='radio' name='kafun' value='3' onClick="setBg(this);">少ない<br> </td></tr> </table> </body> </html>
お礼
yambejpさん、ありがとうございます。 とても参考になりました。 感謝致します。
- babu_baboo
- ベストアンサー率51% (268/525)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test</title> <table> <tr> <td>今日の天気</td> </tr> <tr> <td><input type="radio" name="tenki" value="1">晴れ</td> </tr> <tr> <td> <input type="radio" name="tenki" value="2">曇り</td> </tr> <tr> <td><input type="radio" name="tenki" value="3">雨</td> </tr> </table> <br> <table> <tr> <td>花粉の量</td> </tr> <tr> <td><input type="radio" name="kafun" value="1">多い</td> </tr> <tr> <td><input type="radio" name="kafun" value="2">普通</td> </tr> <tr> <td><input type="radio" name="kafun" value="3">少ない</td> </tr> </table> <script type="text/javascript"> //@cc_on document./*@if(1)attachEvent('on'+@else@*/addEventListener(/*@end@*/'click', setBGColor, false); var BGColor = {'tenki': '#ff0', 'kafun': '#f00', 'none':'#fff'}; function setBGColor (evt) { var e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/; var c = 0, r, o; if ('INPUT' === e.nodeName && 'radio' === e.type) { r = document.getElementsByName(e.name); while (o = r[c++]) o.parentNode.style.backgroundColor = BGColor[e == o ? e.name: 'none']; } } </script> とか。
お礼
babu_babooさん、ありがとうございます。 やりたい事が実現されています。 プログラムミングがとても難しいですね。 ここまで高度な事が理解出来るまで頑張って勉強します。 とても参考になりました。 感謝致します。
お礼
x_jouet_xさん、ありがとうございます。 やりたい事が実現されてます。 それと、これならもっと沢山のテーブルの場合でも その数の分だけ関数を作ればいいのも分かりました。 とても参考になりました。 感謝致します。