プロが教えるわが家の防犯対策術！

複数のテーブルをラジオボタンで背景を変える

解決済

  • 質問者：mintohime
  • 質問日時：
  • 回答数：3件

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>

通報する

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

質問の本文を隠す

A 回答 (3件)

No.1ベストアンサー

  • 回答者： x_jouet_x
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

x_jouet_xさん、ありがとうございます。
やりたい事が実現されてます。
それと、これならもっと沢山のテーブルの場合でも
その数の分だけ関数を作ればいいのも分かりました。
とても参考になりました。
感謝致します。

通報する
お礼日時：2009/08/20 10:52

No.3

  • 回答者： yambejp
  • 回答日時：

こんな感じでどうでしょ？



<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

yambejpさん、ありがとうございます。
とても参考になりました。
感謝致します。

通報する
お礼日時：2009/08/20 10:48

No.2

  • 回答者： babu_baboo
  • 回答日時：

<!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>
とか。
    • good
    • 0
    • 件
通報する
この回答へのお礼

babu_babooさん、ありがとうございます。
やりたい事が実現されています。
プログラムミングがとても難しいですね。
ここまで高度な事が理解出来るまで頑張って勉強します。
とても参考になりました。
感謝致します。

通報する
お礼日時：2009/08/20 10:50

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報