ラジオボタンでテーブルの背景色を変える
- テーブルで数十行同じ項目を表示させるとき、目印をつけたいと思います。ラジオボタンを配置し、選択されたラジオボタンと同じ行の背景色を変えたいです。
- テーブルで数十行同じ項目を表示させるとき、目印をつけたいです。ラジオボタンを配置し、選択されたラジオボタンと同じ行の背景色を変えたい方法を教えてください。
- テーブルで数十行同じ項目を表示させるとき、目印をつけたいです。ラジオボタンを配置し、選択されたラジオボタンと同じ行の背景色を変える方法を教えてください。
- ベストアンサー
ラジオボタンでテーブルの背景色を変える
いつもお世話になっています。 テーブルで数十行同じ項目を表示させるとき、今何行目を見ているかわかりやすいように 目印をつけたいと思っています。 ラジオボタンを配置したのですが、一行が横に長く、区別しにくいため 加えて選択されたラジオボタンと同じ行の背景色を変えようと思いました。 が、こういうことってできるのでしょうか？ ラジオボタン選択でウィンドウの色を変える方法の応用かなと思って 色々試しましたが全て失敗でした(涙)。 どなたかご存知の方、教えてください。 ちなみにテーブルのイメージは大体こんな感じです↓ <p align=center> <TABLE frame=below rules=all WIDTH=98% vspace=100> <tr> <td width=7% align=right><input type="radio" name="count" value="1"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> <tr> <td width=7% align=right><input type="radio" name="count" value="2"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> <tr> <td width=7% align=right><input type="radio" name="count" value="3"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> </table>
- lovelypooh
- お礼率76% (55/72)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちはlovelypoohさん、xruzです。 Ie5.5sp2,Ie5.0sp2で動作確認済み、NN動作不可。 <html> <head> <title></title> </head> <script language="javascript"> <!-- var saveTr; function setBg(rd) { if(saveTr) saveTr.bgColor="white"; saveTr=rd.parentNode.parentNode; saveTr.bgColor="lavenderblush" } //--> </script> <Body> <form method="post" name="frm"> <p align=center> <table frame=below rules=all width=98% vspace=100> <tr> <td width=7% align=right> <input type="radio" name="count" onClick="setBg(this);"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> <tr> <td width=7% align=right> <input type="radio" name="count" onClick="setBg(this);"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> <tr> <td width=7% align=right> <input type="radio" name="count" onClick="setBg(this);"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> </table> </form> </body> </html> こんな感じで良かったでしょうか？
関連するQ&A
- ラジオボタンで指定したテーブルの色変更をする
こんにちは、初めまして。一人では解決できないので・・・どなたか教えてください（＞＜）よろしくお願い致します。 やりたいことは、ラジオボタンで指定した部分のテーブル内のみ色を変更するということです。背景色を変更するというやり方はわかるのですが、指定した位置のみ色を変更するというプログラムの組み方がわかりません・・・近いサンプルなどあったのでいじってみたのですが、応用ができないみたいで、、意図した通りの動きにすることはできませんでした。。 ほんとに初歩的な質問でもうしわけございませんが、どなたかよろしくお願い致しますm(_ _)m ソースは以下になります。 ※黄のラジオボタンを選択すると『変更！』の部分が黄色に変更し、黒のラジオボタンを選択すると『変更！』の部分が黒色に変更する・・・（他の色も同じ動きです）という感じです。 <table width="240" height="104" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="238" height="32"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10%" style="padding-left:3px;" align="left"> <input name="radiobutton" type="radio" value="radiobutton" checked="checked" /> </td> <td width="9%" align="left">白</td> <td width="11%" style="padding-left:3px;"> <input name="radiobutton" type="radio" value="radiobutton" /> </td> <td width="9%">黄</td> <td width="11%" style="color:#FF0000; padding-left:3px;"> <input name="radiobutton" type="radio" value="radiobutton" /> </td> <td width="9%">黒</td> <td width="11%" style="padding-left:3px;"> <input name="radiobutton" type="radio" value="radiobutton" /> </td> <td width="9%">赤</td> <td width="10%" style="padding-left:3px;"> <input name="radiobutton" type="radio" value="radiobutton" /> </td> <td width="9%">黄</td> </tr> </table> </td> </tr> <tr> <td height="72"> <table width="98%" height="62" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td valign="top">変更！</td> </tr> </table> </td> </tr> </table>
- ベストアンサー
- JavaScript
- 背景色を変えて未入力チェックをしたいのですが。。。
アンケートのフォームを作っています。記入項目が多いので未入力項目の背景色を変えてチェックしたいのですがうまくいきません。 フォームの中には ・テキストボックス ・ラジオボタン ・チェックボックス があり未入力の項目について背景色を変更してます。いろいろ試してみてなんとかテキストボックスとチェックボックスの背景色は変えることができたのですがラジオボタンの背景色が変えられません。 製作途中でうまく作動しませんがイメージを載せておきますのでなんとかお願いします。 <html> <head> <title></title> </head> <script language="javascript"> <!-- var saveTr; function setBg(rd) { if(saveTr) saveTr.bgColor="white"; saveTr=rd.parentNode.parentNode; saveTr.bgColor="lavenderblush" } //--> </script> <Body> <form method="post" name="frm"> <p align=center> <table frame=below rules=all width=98% vspace=100> <tr> <td width=7% align=right> <input type="radio" name="count" onClick="setBg(this);"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> <tr> <td width=7% align=right> <input type="radio" name="count" onClick="setBg(this);"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> <tr> <td width=7% align=right> <input type="radio" name="count" onClick="setBg(this);"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> </table> </form> </body> </html>
- 締切済み
- JavaScript
- 選択したテーブルのセルの背景色を変更させる方法
こんばんは。 現在クイズを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をふればできると聞き、初心者ながら色々試してみたものの、なかなかうまくいきません。 どなたかご教授お願いいたします。
- ベストアンサー
- JavaScript
- 複数のテーブルをラジオボタンで背景を変える
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>
- ベストアンサー
- JavaScript
- ラジオボタン選択で「複数ラジオボタン」をアクティブにするには？
■下記サンプルソースのラジオボタンの「はい」を選択すると複数のラジオボタンがアクティブになるJavaScriptがわからず困っております。教えて頂けないでしょうか。 （ページ開いた際は「いいえ checked」で複数ラジオボタンはグレーで選択無効） 用途はアンケートフォームです。 可能であればシンプルなソースで「最新のWinIE、MacSafari」に対応していると非常に助かります。先輩方よろしくお願いします。 <form name="form2" method="post" action=""> <table> <tr> <td>■「はい」を選択すると、ラジオボタン（カテゴリー1～4）がアクティブになる。 </td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">はい <input name="radiobutton" type="radio" value="radiobutton" checked>いいえ </td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">カテゴリー1 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー2 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー3 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー4 </td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- ラジオボタンでの表示の切替方法
2つのラジオボタンの切替によって、表示の切替を行いたいです。 例えば、Aを選択すると(1)の入力フォームが表示され、Bを選択すると(2)が表示したいです。初期表示はAが選択された時と同じ内容となります。 <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td><form name="Quick1"> <tr><td>選択</td> <td> <input type="radio" name="A" value="1" checked>A <input type="radio" name="B" value="2">B </td></tr> <tr> <td>(1)</td> <td> <input type="text" size="6" maxlength="5" name="text1" value="">－ <input type="text" size="6" maxlength="5" name="text2" value="">－ <input type="text" size="6" maxlength="5" name="text3" value=""> </td></tr> <tr> <td>(2)</td> <td> <input type="text" name="text7" size="43" value=""> </td></tr> </table></form></td></tr></table> すみませんが、よろしくお願い致します。
- ベストアンサー
- JavaScript
- メールフォームについて
この中にどのようなHTMLを書けば自分のPCにメールが届く ようになりますか？よろしくお願いします。 <h2>■MAIL FORM</h2> <div class="text"> <form><table><tr><td width="100" align=right> NAME</td><td align=right><input type="text" name="Name" size="34"></td></tr><tr><td width="100" align=right> MAIL</td><td align=right><input type="text" name="Mail" size="34"></td></tr></table> <TEXTAREA NAME="Comments" ROWS="8" COLS="39" value="comments"></TEXTAREA> <br> <table><tr><td width="100" align=right> </td> </tr><tr> <td width="100" align=right> URL</td><td><input type="text" name="URL" value="http://" size="34"></td></tr><tr><td></td><td align="right"> <INPUT TYPE="reset" VALUE=" Reset "> <INPUT TYPE="submit" VALUE=" Send "></FORM> </td></tr></table><br></div>
- ベストアンサー
- HTML
- ラジオボタンで選択した項目の合計金額を出したい
簡単な見積フォームを作成中です。 ラジオボタンで商品を選択して、その合計金額を表示させたいのですが、何故か”undefined”と表示されてしまいます。 根本的な考え方が間違っているのでしょうか？ 皆様ご教授の程お願いします。 <HTML><HEAD> <!-- function calc(){ hontai=document.ordersheet.hontai.VALUE; document.ordersheet.output.value=hontai; } //--> </SCRIPT></HEAD> <BODY> <FORM NAME="ordersheet" METHOD="POST"onsubmit="return check()"> <TABLE cellPadding=3 width=680> <TBODY><TR> <TD align=middle colSpan=5>お見積り内容 <TR><TD align=middle width=30> <TD align=middle width=200> <TD align=middle width=150>商品名 <TD align=middle width=150>商品名 <TD align=middle width=150>商品名 </TD> <TR><TD rowspan="2" align=middle width=30>本体 <TD rowspan="2" width=350></TD> <TD width=145>A商品<BR>273000円（税込）<BR> <TD width=145>B商品<BR>288750円（税込）<BR> <TD width=145>C商品<BR>109410円（税込）<BR> </TD> <TR> <TD><DIV><INPUT TYPE="radio" NAME="hontai" VALUE="273000" onClick="calc()"></DIV></TD> <TD><DIV><INPUT TYPE="radio" NAME="hontai" VALUE="288750" onClick="calc()"></DIV></TD> <TD><DIV><INPUT TYPE="radio" NAME="hontai" VALUE="109410" onClick="calc()"></DIV></TD> </TR> <TR><TD align=center colspan="2">合計金額</TD> <TD colspan="3" ><INPUT TYPE="text"NAME="output" SIZE="12">円</TD></TR> </TBODY></TABLE></FORM> </BODY></HTML>
- ベストアンサー
- JavaScript
- テーブルのテーブルの間に間ができるのでしょうか？
はじめまして、超html初心者のものです。 なぜ同じようテーブルを３つ書いているのに一番上のテーブルと真ん中のテーブルの間が開いてしまっているのかがわかりません。 あと、一番上のテーブルの-から先をもう少し左に寄せることもうまくいきません。 なにかアドバイスをよろしくお願いします。 ↓これがソースです。 <html> <head><title>test</title> </head> <form> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">日付け：</th> <td width=284> <input type="text"><input type="button"> </td> <td> - </td> <td><input type="text"><input type="button"></td> </tr> </table> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">部署：</th> <td width=100> <select name="busyo"></select> </td> <th width=80 align="right">営業所：</th> <td width=100> <select name="eigyousyo"></select> </td> <th width= 80 align="right">担当コード:</th> <td width=450> <select name="tantocode"></select> </td> </tr> </table> <table border=1cellspacing=0cellpadding=2width=760> <tr> <th width=80 align="right">権限:</th> <td width=700> <select name="kengen"></select> </td> </tr> </table> </form> </html>
- 締切済み
- HTML
- 背景色を戻したい
いつもお世話になっています。 複数行のテーブルを作成して、ラジオボタンで選択行のみ背景色を変更する画面を作っています。 以下がソースです。 <HTML> <BODY bgcolor="#F0E68C"> <TABLE border="1" cellspacing="0"> <TR> <TD width="5%"> <INPUT type="radio" name="count" onFocus="this.parentNode.parentNode.bgColor='#F4A460';" onBlur="this.parentNode.parentNode.bgColor='';"></TD> <TD width="10%">１行目左</TD> <TD width="10%">１行目右</TD> </TR> <TR bgcolor="#E9967A"> <TD width="5%"> <INPUT type="radio" name="count" onFocus="this.parentNode.parentNode.bgColor='#F4A460';" onBlur="this.parentNode.parentNode.bgColor='';"></TD> <TD width="10%">２行目左</TD> <TD width="10%">２行目右</TD> </TR> <TR> <TD width="5%"> <INPUT type="radio" name="count" onFocus="this.parentNode.parentNode.bgColor='#F4A460';" onBlur="this.parentNode.parentNode.bgColor='';"></TD> <TD width="10%">３行目左</TD> <TD width="10%">３行目右</TD> </TR> </TABLE> </BODY> </HTML> ラジオボタンの選択が外れた場合、元の行背景色に戻したいのですが（『２行目』）、 <TR>のbgcolor="#E9967A"に戻らず、<BODY>のbgcolor="#F0E68C"になってしまいます。 どうしたら元の行背景色に戻すことができるのでしょうか？ それとも他に方法があるのでしょうか？ ご存知の方、教えてください・・・。
- 締切済み
- JavaScript
お礼
早速の回答ありがとうございます。 しかも動作確認までして頂いて・・・。感謝感謝です。 動作も考えていた通りです。 思わず「わぉ！！」と叫んでしまいました。感動です。 JavaScriptの魅力にハマりつつあった状態が、ドツボです。 本当にありがとうございました。 機会がありましたら、これからもよろしくお願いします(ペコリ)。