ifで<TR>を段落ごと消す・表示切り替えをしたいんですが…

2023/10/16 00:36

このQ&Aのポイント

画面上でif文を使用して、指定した条件に基づいて<TR>タグを含む要素を非表示にしたり表示させる方法について質問です。
質問者はdocument.form1.test1.style.display = "none";が正しく動作しないと考えています。
質問者は詳細な動作確認を行い、解決策を見つけることができませんでした。

ベストアンサー

ifで<TR>を段落ごと消す・表示切り替えをしたいんですが…

2008/12/07 08:59

ifに持ってきた数字で<TR>を段落ごと消す表示切り替えをしたいんですが上手くいきません document.form1.test1.style.display = "none";のところがおかしいとは思ってるんですが… 昨夜からあれこれやってみたけどもう駄目＞＜どなたかお時間のある方がいらっしゃいましたら教えてください http://kissho.xii.jp/1/src/1jyou57340.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja-JP"> <HEAD><TITLE>表示切り替えテスト</TITLE> <SCRIPT TYPE="text/javascript"> <!-- function kirikae(){ var test_in = document.form1.test_in.options[document.form1.test_in.selectedIndex].value; if (test_in == "1") { document.form1.test1.style.display = "none"; //ここがおかしいとは思うんですが document.form1.test2_2.style.display = "inline";} else if (test_in == "2") { document.form1.test2_2.style.display = "none"; document.form1.test1.style.display = "inline";} else { document.form1.test2_2.style.display = "inline"; document.form1.test1.style.display = "inline";} } </SCRIPT> </HEAD><BODY><FORM NAME="form1"><TABLE border="1"> <TR id="test1"> <TD> test1 </Td> </Tr> <TR id="test2"> <TD> test2 <input type="text" size="10" id="test2_2"> </Td> </Tr> <TR> <TD> <SELECT NAME="test_in" onChange="kirikae()"> <OPTION VALUE="0">0 <OPTION VALUE="1">1 test1をTRの段落ごと消す(ようにしたいんだけど消えない) <OPTION VALUE="2">2 test2のテキストエリアを消す </SELECT> </Td></Tr> </TABLE></FORM></BODY></HTML>

onenewset
お礼率100% (3/3)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

zeeeg
ベストアンサー率55% (5/9)

2008/12/07 16:53 回答No.1

test1 や test2_2 は form1 の部品ではないので、 document.form1.test1 というような書き方ではなく、 document.getElementById("test1") というように書き替えると良いでしょう。

質問者

お礼 2008/12/07 21:02

ありがとうございます。上手くいきました。よかった～

関連するQ&A

JavaScriptでの表の行の表示・非表示の切り替え
現状では、テスト1を選んだときだけテキストを出すことはできるのですが、どうしても2行表示するという事ができません。テスト1を選択した時だけ2行表示し、テスト1以外を選択した時は非表示にするにはどうすればよいのでしょうか。 <html> <head> <title>テスト</title> <script type="text/javascript" language="JavaScript">  </script> </head> <body> <table border="1" width="367"> <tr> <td width="134"> <form> <select onchange="showthis(this)"> <option selected="selected">選んでください</option> <option value="test1">テスト１</option> <option value="test2">テスト２</option> <option value="test3">テスト３</option> </select> </form> </td> <td width="217"> <p>テスト</p> </td> </tr> <tr> <td width="134"> <p> </p> </td> <td width="217"> <p> </p> </td> </tr> </table> <div id="test1" style="display:none;"> （本来はここに2行追加したい） </div> </body> </html>
- ベストアンサー
- JavaScript
ラジオボタン＋style.displayで<TR>の表示を切り替えるとテーブルが拡大していく
ラジオボタンを使って、 if (keisan_select == "1") { document.getElementById('TAG_check_set1').style.display = "inline"; document.getElementById('TAG_check_set2').style.display = "none"; という風に<TR>のstyleを変更してテーブルの表示切り替えを行っているんですが Firefoxで実際に動作させてみると、表示を切り替えるたびセルが拡大するような形で下にずれていきます。(IE7だと問題なし) Firefoxのエラーコンソールでは特に警告無く、 Another HTML-lint gatewayの文法チェックでは75点で普通の評価。(エラーの重要度最大2点) http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html タグに関係ないところで少し書き換えると動作が変わったりするのでうちの環境に問題があるのかも知れないけど・・何が原因かわかる人います？。アップローダに上げたサンプル http://kissho.xii.jp/1/src/1jyou73993.html <TABLE style="border:1px solid"> <TR><TD> テキストエリアが↓にずれていく謎のボタン　<label for="TAG_in_check1"><input type="radio" name="keisan_select" id="TAG_in_check1" onclick="set_display()" value="1" checked>猫</label> 　<label for="TAG_in_check2"><input type="radio" name="keisan_select" id="TAG_in_check2" onclick="set_display()" value="2">犬</label> 　<label for="TAG_in_check3"><input type="radio" name="keisan_select" id="TAG_in_check3" onclick="set_display()" value="3">狸</label> </TD></TR> <TR id="TAG_check_set1"><TD>表示変更領域　にゃんこ</TD></TR> <TR id="TAG_check_set2" style="display:none"><TD>表示変更領域　わんこ</TD></TR> <TR id="TAG_check_set3" style="display:none"><TD>表示変更領域　ぽんぽこ</TD></TR> </TABLE>
- ベストアンサー
- JavaScript
javascriptがIEで機能しない
ヘッダー内 <script language="JavaScript">  </script> ボディー内 <form name="form1"> <select name="select1" onchange="view_ctrl()"> <option value="">選択してください</option> <option>選択１</option> <option>選択２</option> </select> </form> <table><tr><td><div id="block1" style="display:block">表示</div></td></tr></table> Firefox3.6ではうまく選択肢によって表示非表示にできたのですが、IE8では選択１を選択しても非表示のままですどこを修正してやればいいでしょうか？ぜひ御指南ください。
- ベストアンサー
- JavaScript
DOCTYPE宣言とjavascript
United Statesを選んだ場合、州を選択。それ以外の国の場合はtextフィールドで県なりを直接書き込むと言うようにしたく、下記の様にページを作成したのですが、 IE、Opera、Safariなど他では全て動作したのですが、 Firefoxのみ動作しませんでした。但し、DOCTYPE宣言の"http://www.w3.org/TR/html4/loose.dtd" を削除したらFirefoxでも動作しました。ただ、ここを削除すると全体的にデザインがズレてしまいます。 Firefoxでも動くようにjavascriptの部分を変更すると言う事で解決したいのですが、良い書き方が解りません。どなたかご教授願えますでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <body> <script type="text/javascript"> function changeField(){ index= test_form.country.value; if (index != "UnitedStates"){ document.getElementById("select1").style.display="inline"; document.getElementById("select1").disabled=false; document.getElementById("select2").style.display="none"; document.getElementById("select2").disabled=true; } else { document.getElementById("select1").style.display="none"; document.getElementById("select1").disabled=true; document.getElementById("select2").style.display="inline"; document.getElementById("select2").disabled=false; } } </script> <form name="test_form"> <select name="country" onChange="changeField()"> <option value="Japan" selected="selected">Japan</option> <option value="UnitedStates">United States</option> </select> <input id="select1" name="state" type="text" size="20" /> <select id="select2" name="state" style="display:none" disabled> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> </select> </form> </div> </body> </html>
- ベストアンサー
- JavaScript
ラジオのチェックでフォーム表示、PHPへPOSTさせたい
見よう見まねで作成したのですが、わからないので教えてください。ラジオボタンのOKをクリックするとアカウントとパスワードの入力フォーム、ログインボタンが表示され、aaa.phpに飛びたいです。「OK」で表示、「NO」で非表示はなんとかできましたが、問題が２点あります。１．test.htmlにアクセスしたときすでに「OK」にチェックがついていて、テキストエリアとログインボタンが表示されてしまいます。「NO」のほうにcheckedをいれてみましたがダメでした。２．phpへとばず、test.htmlにとんでしまいます。宜しくお願いいたします。 test.html - - - - - - - - - - - - - - - - - - - <script type="text/javascript">  </script> <form name="Quick1"> <form name="send" method="POST" action="aaa.php"> <input type="radio" name="AB" value="1" checked onclick="Sel(this)">OK <input type="radio" name="AB" value="2" onclick="Seｌ(this)">NO</td></tr> <tr id="SelA"> <td></td><td> <input type="text" size="30" maxlength="5" name="account" ><br> <input type="password" size="24" maxlength="5" name="password" > <input type="submit" name="btn" value="ログイン"> </form> </td></tr> <tr id="SelB" style="display:none">・・・</form>
- ベストアンサー
- JavaScript
表示されません(>_<)!!
以下のように作ってみたんですけど、わたしは判定結果は四角の中に表示されるようにやったつもりだったんですけど、新しいページに「痩せてます」と表示されてしまいます。どこを直せば良いでしょう？お願いします <HTML> <HEAD> <TITLE>関数のテスト</TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY> <form name="aaa"> <table> <tr><td>身長</td><td><input name = "h"> </td></tr> <tr><td>体重</td><td><input name = "w"> </td></tr> <tr><td><input type="button" value ="判定" onClick = "test()" ></td></tr> <tr><td>判定結果</td><td><input name = "hi"> </td></tr> </table> </form> </BODY> </HTML>
- ベストアンサー
- JavaScript
セレクトボックスでそれ以降の表示を切り替えたい
http://5am.jp/javascript/form_change_javascript/ の「サンプルソース（セレクトボックス）」のような入力フォームを作成中です。セレクトボックスでの選択によって、その下に複数行表示させたいので、サンプルソースのgetElementByIdのところをgetElementsByClassNameにして実装してみたのですが動きませんでした…。以下が自分が書いたコードになります。どこがおかしいのでしょうか？（インデントがうまくできていなくて申し訳ないです。）回答よろしくお願いします。 <script type="text/javascript"> function entryChange2() { if (document.getElementById('changeSelect')) { id = document.getElementById('changeSelect').value; if (id == 'select1') { document.getElementsByClassName('firstBox2').style.display = ""; document.getElementsByClassName('secondBox2').style.display = "none"; } else if (id == 'select2') { document.getElementsByClassName('firstBox2').style.display = "none"; document.getElementsByClassName('secondBox2').style.display = ""; } } } window.onload = requestChange; </script> <form> <table border="0" cellspacing="0" cellpadding="0"> <tr> <th>利用方法</th> <td> <select id="changeSelect" name="hoge" onchange="entryChange2();"> <option value="select1">初めて申し込む</option> <option value="select2">2度目以降の利用</option> </select> </td> </tr>  <tr class="firstBox2"> <th>紹介者</th> <td><input type="text" /> <p>紹介された方のお名前を入力してください。</p></td> </tr> <tr class="firstBox2"> <th>紹介者のメールアドレス</th> <td><input type="text" /> <p>紹介された方のメールアドレスを入力してください。</p></td> </tr>  <tr class="secondBox2"> <th>名前</th> <td><input type="text" /> <p>名前を入力してください。</p></td> </tr> <tr class="secondBox2"> <th>会員番号</th> <td><input type="text" /> <p>会員番号を入力してください。</p></td> </tr> </table> </form>
- ベストアンサー
- JavaScript
「…は宣言されていません。」エラー回避
下記のようなスクリプトコードがあります。 <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>test</title> </head> <body> <script type="text/javascript">  </script> <form name="form1"> <select id='sss' style='display:none;position:absolute'　name='kintaicode' onchange='listsel()'>　　--- (2) <option value='1'>東京都</option> <option value='2'>神奈川県</option> </select> <table> <tr> <td onClick="pulldown()">A</td> </tr> <tr> <td onClick="pulldown()">B</td> </tr> </table> <input type='text' name='an'> </form> </body> </html> (2)のところでidを宣言しているのですが、実行させAをクリックすると「エラー：'sss'は宣言されていません。」と表示されます。回避させる方法はありますか？ちなみに、何をしたいのかというと、クリックしたところにプルダウンメニューを出したいのです。
- ベストアンサー
- JavaScript
JSでページ内の表示を変えた時の問題について
どなたかお手すきでしたら、稚拙な質問にお付き合いお願い致します。 Javascriptを利用して、プルダウンメニューの選択肢を選んでページ内の表示を変更したときの問題なのですが、選択後submitボタンで次のページに移動しブラウザの戻るボタンで前ページに戻るとプルダウンメニューにはさきほど選択したものが残っているのですが、変更したはずの表示部分が元に戻ってしまいます。 FireFoxで確認した場合、この症状はみられませんでした。 IEの仕様なのでしょうか？どなたか解決方法が分かりましたらご教授お願い致します。【ソース】 <html> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Type" Content="text/Javascript"> <title>テスト</title> <script type="text/javascript">  </script> </head> <body> <form name="one" action="./two.html" method="POST"> <table class="box2"> <tr class="tr1"> <td class="pdown"> <select name="q1" onChange="showthis(this.value)"> <option value="1_0" selected>----　選んでください　----</option> <option value="1_1">　１－いち</option> <option value="1_2">　２－に－</option> <option value="1_3">　３－さん</option> <option value="1_4">　４－よん</option> <option value="1_5">　５－ご</option> </select> </td> </tr> </table> <div id="youso"> <table class="box1"> <tr> <td> <div id="q1"> <div id="1_0"> <p>【----　選んでください　----】</p> </div> <div id="1_1" style="display: none;"> <p>【１－いち】</p> </div> <div id="1_2" style="display: none;"> <p>【２－に－】</p> </div> <div id="1_3" style="display: none;"> <p>【３－さん】</p> </div> <div id="1_4" style="display: none;"> <p>【４－よん】</p> </div> <div id="1_5" style="display: none;"> <p>【５－ご】</p> </div> </div> </td> </tr> </table> </div> <input type="submit" name="" value="次へ進む"> </form> </body> </html>
- ベストアンサー
- JavaScript
ページが切り替わるスクリプトで最初から指定のページを表示させる
<html> <head> <script type="text/javascript" language="JavaScript">  </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option selected="selected">記事を選ぶ</option> <option value="item1">記事１</option> <option value="item2">記事２</option> <option value="item3">記事３</option> </select> </form> </body> <html> これなんですが、これを貼ってあるページを読み込んだ際、最初からitem1を表示した状態にしたいのですがどうすればよいのでしょう？
- 締切済み
- Java