• ベストアンサー

javaスクリプトで、テーブルのセルの色を変更する方法

javaスクリプト初心者です。ご指導宜しく御願い致します。 コンボボックスで指定の文字列が選択された場合に、 ある場所のバックグラウンドカラーを変更したいと思っているのですが 可能でしょうか? オンチェンジのイベントで何かしらの判断をさせるのかとは 思うのですが・・。 (例) コンボボックスAが選択された場合に、 TEST02と表示させている部分の背景色を変更。 ------------- | TEST01 | A ▼ | ------------- | TEST02 | TEST | ------------- <TABLE BORDER="1"> <TR> <TD>TEST01</TD> <TD> <SELECT NAME="TEST"> <OPTION value="A">A</OPTION> <OPTION value="B">B</OPTION> </SELECT> </TD> </TR> <TR> <TD>TEST02</TD> <TD> <INPUT TYPE="text" value ="test"> </TD> </TR> </TABLE BORDER> 大変申し訳ありませんが、ご指導のほど宜しく御願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

変更したいセルにidを振って、styleのbackgroundColor の値をいじればできそうですね。 <TABLE BORDER="1"> <TR> <TD>TEST01</TD> <TD> <SELECT NAME="TEST" onChange="document.getElementById('hoge').style.backgroundColor='#ff0000'"> <OPTION value="A">A</OPTION> <OPTION value="B">B</OPTION> </SELECT> </TD> </TR> <TR> <TD id="hoge">TEST02</TD> <TD> <INPUT TYPE="text" value ="test"> </TD> </TR> </TABLE>

その他の回答 (1)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

<TABLE BORDER="1"> <TR> <TD>TEST01</TD> <TD> <SELECT NAME="TEST" onchange="document.getElementById('T2').style.backgroundColor=(this.value=='A')?'#7FFFD4':'';"> <OPTION value="A">A</OPTION> <OPTION value="B" selected>B</OPTION> </SELECT> </TD> </TR> <TR> <TD id="T2">TEST02</TD> <TD> <INPUT TYPE="text" value ="test"> </TD> </TR> </TABLE>

関連するQ&A

  • 選択ボックスで選んだものに応じて値を変更する方法

    片方の選択ボックスで選んだものに応じて もう片方の選択ボックスの表示内容を変更したいと思います。 「なす」を選んだら30円 「きゅうり」を選んだら40円 「ねぎ」を選んだら50円 「選んで下さい。」を選んだら0円(初期値) としたいと思うのですが、下記内容をどのように 変更すればよろしいのでしょうか。 教えて下さい。 <table border="0" width="700"> <tr> <td width="50%"> <select name="野菜"> <option value="SENTAKU">選んで下さい。</option> <option value="NASU">なす</option> <option value="KYUURI">きゅうり</option> <option value="NEGI">ねぎ</option> </select> </td> <td> <select name="値段"> <option value="NEDAN">0円</option> </select> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • プルダウンによる表示制御方法

    プルダウンの選択内容による表示の切り替えを行いたいです。 例えば、AとCを選択すると下にあるテキストボックスが非表示になり Bを選択するとテキストボックスが表示するように制御を行いたいです。 <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td> <form name="a"> <SELECT NAME="b"> <OPTION SELECTED> <OPTION VALUE="0">A <OPTION VALUE="1">B <OPTION VALUE="2">C </SELECT> </td></tr> <tr><td> <input type="text" size="6" maxlength="5" name="text1" value=""> </td></tr> </form> </table></form></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をふればできると聞き、初心者ながら色々試してみたものの、なかなかうまくいきません。 どなたかご教授お願いいたします。

  • フォーム内の値のチェックについて

    このようなフォーム(aspでセレクトボックスの数は可変になります。)にてSubmit時に 同じ値が選ばれていたらalertを出すJavaScriptを作りたいのですが、 どのようなものを作ればよろしいでしょうか? <FORM name="TestForm" action="" method="POST" target=""> <TABLE border="1" cellspacing="0" cellpadding="0" width="100%"> <TR> <td>1位</td> <TD> <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> <td>2位</td> <TD > <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> <td>3位</td> <TD> <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> </TR> </TABLE> <TR><TD> <INPUT type="submit" value=登録 name=B1 onClick=""> </TD></TR> </FORM>

  • 特定のテーブルのみ枠線の色を消したい

    スタイルシートで他のテーブルの為に色を設定しているけど 特定のテーブルのみ、枠線の色をすべて消したい場合は、 どうすればよろしいでしょうか? <style type="text/css"> table {border:1px solid red;} table tr {border:1px solid red;} table th {border:1px solid red;} table td {border:1px solid red;} </style> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=1 cellspacing=1 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=0 cellspacing=0 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> このソースだと、テーブルならすべて枠線が付いてしまいます。 特定のテーブルのみ赤枠ではなく、白にして色を消したいのですがどうすればいいですか?

    • ベストアンサー
    • CSS
  • テーブルを横に二つ並べて表示する方法はありますか?

    テーブルを横に二つ並べて表示する方法はありますか? 4列のテーブルを作るのではなく、 2列のテーブルを2個並べたいです。 <html> <head> <title>test</title> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> <table border=1 cellspacing=1 cellpadding=1> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> </body> </html> これだと、縦に2個並んでしまいます。

  • テーブルのセルの高さ

    テーブルのセルの高さを設定するには、HEIGHT=で設定すればいいと思うのですが、 たとえば、わかりやすい例でいうと、 <HTML> <BODY> <TABLE BORDER=1> <TR><TD VALIGN="top">セルA</TD> <TD VALIGN="top" ROWSPAN="2"> <TABLE BORDER=1> <TR><TD>セルB-1</TD><TD>セルB-2</TD></TR> <TR><TD>セルB-3</TD><TD>セルB-4</TD></TR> <TR><TD>セルB-5</TD><TD>セルB-6</TD></TR> <TR><TD>セルB-7</TD><TD>セルB-8</TD></TR> <TR><TD>セルB-9</TD><TD>セルB-10</TD></TR> <TR><TD>セルB-11</TD><TD>セルB-12</TD></TR> <TR><TD>セルB-13</TD><TD>セルB-14</TD></TR> </TABLE> </TD></TR> <TD VALIGN="top">セルC</TD></TR> </TABLE> </BODY> </HTML> というテーブルの場合、セルAとセルCの境界はセルBの高さの真中くらいに なると思います。 それで、セルAとセルCの内容は固定なのですが、セルB内のテーブルはcgiからの 書き出しで可変長です。 実現したいことは、セルBの大きさにかかわらず、セルAの高さを固定したいのです。 セルCはセルBの高さと連動して可変するようにテーブルを組みたいのですが、 どのように指定すれば実現できるでしょうか? セルAにHEIGHT指定してもなぜか、無視(?)されてしまいます・・・ よろしくお願いします。

  • セレクトボックスを使ったJavaScriptでの計算方法

    セレクトボックスから名前を選択して計算する方法を教えてください。 HTMLとJavaScriptは別に分けます。 ----------.html---------- <table border="1"> <tr><td>武器</td> <td><form name="myForm"> <select name="Item" size="1" tabindex="0"> <option value="0">あああああ</option> <option value="1">いいいいい</option> <option value="2">ううううう</option>      ・      ・      ・      ・      ・ </select> </td></tr> <tr><td>OP1</td> <td> <select name="OP1" size="1" tabindex="0"> <option value="0">AAAAA</option> <option value="1">BBBBB</option> <option value="2">CCCCC</option>      ・      ・      ・      ・      ・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option>      ・      ・      ・      ・      ・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option>      ・      ・      ・      ・      ・ </select> </td></tr> <tr><td colspan="2" align="center"> <input type="button" value="計算する" onclick="Calculation()"> <input type="reset" name="リセット" value="リセット"> </form> </td></tr> <tr><td colspan="2" align="center"> <form name="TxtArea"><input type="text" name="myResult" size="20"> </form> </td></tr> </table> .jsではItemをbox1、OP1をbox2、OP3をbox3、OP3をbox4としています。 box1[0]=10; box1[1]=15; といった感じです。 全部足し算で計算します。 どのようにすれば計算できるのかJavaScriptについて書かれてるページを見たのですが理解できなかったのでよろしくお願いします。

  • ジャバスクリプトで作った自動計算フォームが

    ジャバスクリプトで作った自動計算フォームが 動かなくて困り果ております。 初心者です。御指南のほど、どうぞ宜しくお願いします。 ■ 編集ソース <html> <head> <title>テスト</title> <style type="text/css"> <!-- table { border-collapse: collapse; } table, th, td { border: 1px #808080 solid; } th, td { padding: 3px 10px; } th { background-color: #d3e9fa; } td { background-color: #ffffff; } td strong { color: #ff0000; } --> </style> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.selectedIndex * 2900; document.form1.goods1.options[document.form1.goods1.selectedIndex].value; document.form1.field1.value = price1; // 小計を表示 // 合計を計算 var total = price1 // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>コース名</th> <th>単価</th> <th>数量</th> <th>縁</th> <th>金額</th> </tr> <tr> <td>激安コースA</td> <td align="right">2,900円</td> <td><select name="goods1" onchange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select></td> <td><select name="goods1" onchange="keisan()"> <option value="0">額タイプを選択してください</option> <option value="500">タイプ1(500円)</option> <option value="1000">タイプ2(1,000円)</option> <option value="1500">タイプ3(1,500円)</option> </select></td> <td><input type="text" name="field1" size="8" value="0" /> 円</td> </tr> <tr> <td align="right" colspan="4"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form> </body> </html>

  • ラジオボタンで指定したテーブルの色変更をする

    こんにちは、初めまして。一人では解決できないので・・・どなたか教えてください(><)よろしくお願い致します。 やりたいことは、ラジオボタンで指定した部分のテーブル内のみ色を変更するということです。背景色を変更するというやり方はわかるのですが、指定した位置のみ色を変更するというプログラムの組み方がわかりません・・・近いサンプルなどあったのでいじってみたのですが、応用ができないみたいで、、意図した通りの動きにすることはできませんでした。。 ほんとに初歩的な質問でもうしわけございませんが、どなたかよろしくお願い致します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>

専門家に質問してみよう