- 締切済み
背景色を戻したい
いつもお世話になっています。 複数行のテーブルを作成して、ラジオボタンで選択行のみ背景色を変更する画面を作っています。 以下がソースです。 <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"になってしまいます。 どうしたら元の行背景色に戻すことができるのでしょうか？ それとも他に方法があるのでしょうか？ ご存知の方、教えてください・・・。
- ti-ti-wu-
- お礼率85% (17/20)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- the845t
- ベストアンサー率33% (246/743)
そのスクリプトでは、 選択が外れたとき、色を''としています。 つまり色の指定をなくしています。 故に、bodyの背景色になっています。 ですから、 外れたときの処理を onBlur="this.parentNode.parentNode.bgColor='#E9967A';" とすれば元の行背景色になります。
関連するQ&A
- 背景色を変えて未入力チェックをしたいのですが。。。
アンケートのフォームを作っています。記入項目が多いので未入力項目の背景色を変えてチェックしたいのですがうまくいきません。 フォームの中には ・テキストボックス ・ラジオボタン ・チェックボックス があり未入力の項目について背景色を変更してます。いろいろ試してみてなんとかテキストボックスとチェックボックスの背景色は変えることができたのですがラジオボタンの背景色が変えられません。 製作途中でうまく作動しませんがイメージを載せておきますのでなんとかお願いします。 <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
- ラジオボタンでテーブルの背景色を変える
いつもお世話になっています。 テーブルで数十行同じ項目を表示させるとき、今何行目を見ているかわかりやすいように 目印をつけたいと思っています。 ラジオボタンを配置したのですが、一行が横に長く、区別しにくいため 加えて選択されたラジオボタンと同じ行の背景色を変えようと思いました。 が、こういうことってできるのでしょうか？ ラジオボタン選択でウィンドウの色を変える方法の応用かなと思って 色々試しましたが全て失敗でした(涙)。 どなたかご存知の方、教えてください。 ちなみにテーブルのイメージは大体こんな感じです↓ <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>
- ベストアンサー
- 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
- TABLEの特定の行にスクロールバーをつけたい
横に5個、縦に100個のテキストボックスを用意し、上下に切ったフレームの下画面に表示させ、入力していくページを作っています。 このテキストボックスを5×100のテーブルにしているのですが、 最初の1行を入力項目名に、下から3行ほどを入力値計算結果にしているため、 間の2～97行だけをスクロールさせたいと考えています。 特定の行だけスクロールバーをつけるということはHTMLでできるのでしょうか。 以下ソースです。 <% dim i i=0 %> <table border=1> <tr> <td width=70 align=center bgcolor="#e6e6fa">A</td> <td width=200 align=center bgcolor="#e6e6fa">B</td> <td align=center bgcolor="#e6e6fa">C</td> <td align=center bgcolor="#e6e6fa">D</td> <td align=center bgcolor="#e6e6fa">E</td> </tr> <% do while i<=99 %> <tr> <td align=center><input type="text" maxlength=6></td> <td align=center><input type="text"></td> <td align=center><input type="text"></td> <td align=center width=40><input type="text"></td> <td align=center width=40><input type="text"></td> </tr> <% i=i+1 loop %> <tr> <td rowspan="3" colspan="3"></td> <td align=center bgcolor="#e6e6fa">結果(1)</td> <td align=center><input type="text"></td> </tr> <tr> <td align=center bgcolor="#e6e6fa">結果(2)</td> <td align=center><input type="text"></td> </tr> <tr> <td align=center bgcolor="#e6e6fa">結果(3)</td> <td align=center><input type="text"></td> </tr> </table> このループ間のテーブル行にスクロールバーをつけたいのです。 長々とすみません。 どなたかご存知の方、お願いします・・・。
- 締切済み
- HTML
- 選択したテーブルのセルの背景色を変更させる方法
こんばんは。 現在クイズを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
- このtableタグのサイズ変更の仕方を教えてくださ
<Table border="1" bordercolor="#d4d4d4" cellspacing="0" style="border:thick ridge #d4d4d4;"> <Tr><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー１</a> </Td><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー２</a> </Td><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー３</a> </Td></Tr> <Tr><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー４</a> </Td><Td align="center" bgcolor="#ffff80" valign="middle" width="150" height="150" style="color:7f7f7f;"> WELCOME </Td><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー５</a> </Td></Tr> 書ききれませんでした。 このテーブルをミニサイズで表示したいのですが、width等を使っても小さくなりません。 どうしてですか？ 上手く説明出来ないので、絵を書きました。 下手でごめんなさい。 誰かわかる人いたら教えてください。
- 締切済み
- HTML
- フォームを必須項目にしたい
*印を必須項目にしたいです。 どうすればいいですか？ <form action="mailto:***@***.co.jp" method="POST" enctype="text/plain" name="signup" onSubmit="return validateForm(this,arrFormValidation);"> <table cellspacing="2" cellpadding="2" border="0" class="body" width="601"> <tr> <td align="left" width="120" valign="top" bgcolor="#D5CED1" title="全角"><font color="#A4003A">*<font color="#320012">名字 :</font></font></td> <td valign="top" width="463"><input type="text" name="名字" size="20"></td> </tr> <tr> <td align="left" width="120" valign="top" bgcolor="#D5CED1" title="任意に入力してください。"><font color="#320012"> 電話番号 :</font></td> <td valign="top" width="463"><input type="text" name="電話番号" size="20"></td> </tr> <tr> <td align="left" width="120" valign="top" bgcolor="#D5CED1"><font color="#A4003A">*<font color="#320012"></font></font><font color="#320012">アンケート</font></td> <td valign="top" width="463"> 項目１ <input type="radio" value="１" name="項目１">１ <input type="radio" value="２" name="項目１">２<br> 項目２ <input type="radio" value="１" name="項目２">１ <input type="radio" value="２" name="項目２">２ </td> </tr> <tr> <td align="left" width="120" valign="top" bgcolor="#D5CED1"><font color="#320012"> 送信 :</font></td> <td width="463"> <input type="submit" name="B1" value="送信" style="background:#5C5868;color:#E4FF00;" title="送信を開始する祢。"></td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- クリックするとテーブルの列の背景色が変わる／元に戻る
このサイトを参考に以下のサンプルを作りました。 「あるセルをクリックすると、そのセルと依存関係のあるセルすべての背景色を変更する。」 この例でいくと、 1.セルA1,A2のどれをクリックしても、列Aすべての色が変わる。 2.セルB1,B2のいずれかをクリックすると、列Aは元の色に戻り、列Bすべての色が変わる という動きを実現したいです。 2.機能を実現するにはどのようにすればよいのか、どなたかご存知の方ご教授のほどよろしくお願いいたします。 現時点のサンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>テーブルの列の背景色を変える</title> <SCRIPT language="JavaScript"> <!-- function bgcolor(idName){ for ( i=0 ; i < document.all.item(idName).length ; i++ ) { document.all.item(idName, i).style.backgroundColor = "#EE3300"; } } //--> </SCRIPT> </head> <body> <TABLE border="1"> <TR> <TD width="30"> </TD> <TD width="30">列A</TD> <TD width="30">列B</TD> <TD width="30">列C</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行1</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A1</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B1</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C1</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行2</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A2</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B2</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C2</TD> </TR> </TABLE> </body> </html>
- ベストアンサー
- JavaScript
- 1pxの表を重ねたときにその重ねた部分が2pxになってしまいます
列数が違う表を重ねたのですが重ねた部分が2pxになってしまうので 重ねた部分も1pxで表示させたいのですがどうすればいいのでしょうか？ ソースはこちらです <TABLE BORDER="0" WIDTH="400" CELLSPACING="1" CELLPADDING="5" BGCOLOR="#1C79C6"> <TR BGCOLOR="#E3F0FB"> <TD>あ</TD> <TD>い</TD> </TR> <TR BGCOLOR="#E3F0FB"> <TD>う</TD> <TD>え</TD> </TR> </TABLE> <TABLE BORDER="0" WIDTH="400" CELLSPACING="1" CELLPADDING="5" BGCOLOR="#1C79C6"> <TR BGCOLOR="#E3F0FB"> <TD>↑の部分が2pxになるのを防ぎたいです</TD> </TR> </TABLE> 宜しくお願い致します。
- ベストアンサー
- HTML
- phpのwhile出力に対するJSを使った計算
JS初心者です。phpでmysqlからデータを取り出し、whileでテーブルに商品名等と単価・数・小計を出力していますが、各項目の数字を変更しphpで再計算させると当然ながらリロードが発生するのでテーブルの頭に戻って表示されてしまいます。この点を改善しなければならず、計算自体は単純なものですので、JSかAjaxでと思ったのですが、いずれの方法でも最初の一行しか動作いたしません。各エレメントの「id='x'」を「id='x<?=[renban]?>'」とすると横取りソフト上では「id=x3752」のように各行個別に番号が割り当てられているのですが、結果は同じで、JSには関係がないようにも見えます。下記ではwhileの中にJSが入っていますが、<SCRIPT TYPE="text/javascript"> <!-- // --> </SCRIPT> としてヘッダに置くと全く反応せず、ブラウザのエラー表示では「オブジェクトを指定して下さい」と出ます。大変困ってしまいました。どなたかご教授いただけますよう、よろしくお願いいたします。 以下見ずらいとは思いますが、実際のコードの抜粋です。問題はフォーム中ほどの部分です。 //ここまでDBからのデータ呼び出し部分 以下本題です while($row = mysql_fetch_array($result)){ PRINT<<<EOF <form action= "mv6.php" name="form1" method="POST" id="form1"> </tr><tr bgcolor="FFFFFF" onMouseOver="this.style.backgroundColor='#FFCCFF'" onMouseOut="this.style.backgroundColor='#FFFFFF'" > <td width="20"> <INPUT type='hidden' name='renban' value='$row[renban]'> <INPUT type='hidden' name="kind[$row[renban]]" value="ok"> <input type="checkbox" name="del[$row[renban]]" value="ok"></td> <td width="220"> <INPUT size='26' type='text' name='shu[$row[renban]]' value='$row[shu]'class = 'nonbor' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'" ></td> <td width="300" ><INPUT size='36' type='text' name='hin_na[$row[renban]]' value='$row[hin_na]' id = 'hin_na[$row[renban]]' class = 'nonbor' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"></td> <SCRIPT> function cal(){ x = document.getElementById('x').value; y = document.getElementById('y').value; z = x * y; document.getElementById('z').value = z; } </SCRIPT> <td width="90" ><INPUT size='12' type='text' name='x' value='$row[tanka]' id='x' class = 'nonborri' onKeyup="cal(this);" onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"></td> <td width="90"><INPUT size='12' type='text' name='y' value='$row[kazu]' id='y' class = 'nonborri' onKeyup="cal(this);" onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"></td> <td width="100"><INPUT size='13' type='text' name='z' value='' id='z' class = 'nonborri' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"></td> <td width="240"><INPUT size='40' type='text' name='bikou[$row[renban]]' value='$row[bikou]' class = 'nonbor' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"> </td> </tr> </TABLE> EOF; }
- ベストアンサー
- JavaScript
