javascriptは、まだ全くの初心者で色々探しながら勉強しています。
過去の質問で動作が似ているものがあったのですが、
複数のテーブルに使えるように変更したいのですが
全くやり方が分かりません。
宜しくお願い致します。
2つのテーブルがあります。
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>
No.1ベストアンサー
- 回答日時:
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>
x_jouet_xさん、ありがとうございます。
やりたい事が実現されてます。
それと、これならもっと沢山のテーブルの場合でも
その数の分だけ関数を作ればいいのも分かりました。
とても参考になりました。
感謝致します。
No.3
- 回答日時:
こんな感じでどうでしょ?
<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>
No.2
- 回答日時:
<!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さん、ありがとうございます。
やりたい事が実現されています。
プログラムミングがとても難しいですね。
ここまで高度な事が理解出来るまで頑張って勉強します。
とても参考になりました。
感謝致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
チェックボックス付きのテーブ...
-
配列の使い方
-
return trueとreturn falseの用...
-
特定<table>内の<td>の色を変える
-
value内に変数を入れたい
-
確認ダイアログの出し方(JavaS...
-
至急!GetElementById でtdの...
-
HTML中のTABLEのデータを抽出す...
-
ひ孫に当たるiframe から親ウイ...
-
XMLHttpRequestを利用してPHPへ...
-
innerHTML内では改行は禁止?
-
プルダウンで選択すると、DBの...
-
slickのレスポンシブ > center...
-
onchangeイベントを強制的に発...
-
全てのselect要素をデフォルト...
-
onClick="this.form.submit
-
フォームの値が0だったら空白...
-
JavaScriptde途中で、「exit」...
-
プルダウン 項目が多いので先頭...
-
Jvasvriptのlengthで個数が取得...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
チェックボックス付きのテーブ...
-
JavaScriptの「.querySelectorA...
-
formで項目を連結したい
-
Formのシリアライズができない
-
画面表示とともにtableの指定の...
-
文字数を数える際に空白、改行...
-
クリックしたラジオボタンの行...
-
ラジオボタンを一括で操作する...
-
画面の2重起動をチェックする...
-
ラジオボタンとテキストボック...
-
Javascriptの電卓で最初の何も...
-
入力チェックの外部スクリプト...
-
JavaScriptによる自動計算フォーム
-
複数のselect値で1つも選択され...
-
javascriptで表(テーブル)の自...
-
jQueryで合計を出したい
-
localStorageでのcheckbox制御
-
JavaScriptで、コピーボタンを...
-
Javascriptで自動的に計算する...
-
WEBフォーム(asp)から画像デ...
おすすめ情報