ラジオボタン+style.displayでテーブルの表示を切り替える方法

このQ&Aのポイント
  • ラジオボタンを使用して、テーブルの表示を切り替える方法について説明します。
  • Firefoxでテーブルの表示を切り替えるとセルが拡大してずれる現象が発生する場合、原因の特定に困ることがあります。
  • エラーコンソールやHTML-lintの結果に警告やエラーは表示されていませんが、環境の問題が原因かもしれません。
回答を見る
  • ベストアンサー

ラジオボタン+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>

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

  • ベストアンサー
  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

標準状態に戻す時は nullString でやってみて 例えばこう document.getElementById('TAG_check_set2').style.display = ""; 標準がinlineならinlineへ戻す時に "" (noneの時は"none") 標準(css上での記述)がnoneならnoneへ戻す時に "" (inlineの時は"inline")

onenewset
質問者

お礼

できました!!\(^o^)/ 昨日からずっと試行錯誤しつつ気づかなかった、、 ありがとうございました!。m(_)m

関連するQ&A

  • jsでラジオボタンによって表示内容を変えたい

    とても困っているのでお力をお貸しください。 HTML側に ==================================================== <table summary="条件問題"> <tr> <th>問題1</th> <td> <ul> <li><input type="radio" name="AAAAAA" value="あああ" id="a1" onclick="mondaiChange1();"/> <label for="a1"> あああ</label></li> <li><input type="radio" name="AAAAAA" value="いいい" id="a2" onclick="mondaiChange1();"/> <label for="a2"> いいい</label></li> <li><input type="radio" name="AAAAAA" value="ううう" id="a3" onclick="mondaiChange1();"/> <label for="a3"> ううう</label></li> <li><input type="radio" name="AAAAAA" value="えええ" id="a4" onclick="mondaiChange1();"/> <label for="a4"> えええ</label></li> <li><input type="radio" name="AAAAAA" value="おおお" id="a5" onclick="mondaiChange1();"/> <label for="a5"> おおお</label></li> </ul> </td> </tr> </table> <div class="TableA"> <table summary="問題その2" id="TableA"> <tr> <th>Q1</th> <td> <ul> <li> <input type="radio" value="はい" id="b1" name="BBBBBBB" /> <label for="b1"> はい</label> </li> <li> <input type="radio" value="いいえ" id="b2" name="BBBBBBB" /> <label for="b2"> いいえ</label> </li> </ul></td> </tr> </table> <div class="TableB"> <table summary="問題その2" id="TableB"> <tr> <th>Q1</th> <td> <ul> <li> <input type="radio" value="はい" id="b1" name="BBBBBBB" /> <label for="b1"> はい</label> </li> <li> <input type="radio" value="いいえ" id="b2" name="BBBBBBB" /> <label for="b2"> いいえ</label> </li> </ul></td> </tr> </table> ========================== と記載。 includeしているjsファイル側に ========================== function mondaiChange1(){ radio = document.getElementsByName('AAAAAA') if(radio["a1"].checked) { //フォーム document.getElementById("TableA").style.display = "none"; document.getElementById("TableB").style.display = ""; } else if(radio["a2"].checked) { //フォーム document.getElementById("TableA").style.display = ""; document.getElementById("TableB").style.display = "none"; } else if(radio["a3"].checked) { //フォーム document.getElementById("TableA").style.display = "none"; document.getElementById("TableB").style.display = ""; } else if(radio["a4"].checked) { //フォーム document.getElementById("TableA").style.display = ""; document.getElementById("TableB").style.display = "none"; } else if(radio["a5"].checked) { //フォーム document.getElementById("TableA").style.display = "none"; document.getElementById("TableB").style.display = ""; } //オンロードさせ、リロード時に選択を保持 window.onload = mondaiChange1; } ========================== としているのですが、これだと最初にアクセスしたとき 問題その2のTableAとTableB両方のテーブルが表示されてしまいます。 (その後ラジオボタンを選択すると希望通りの動作になります。) //オンロードさせ、リロード時に選択を保持 window.onload = mondaiChange1; を入れたら大丈夫というのをネットで見たのですが、どう書き換えてもうまくいきません。 希望としては 最初にアクセスしたときは問題1の回答は何も選択されてない状態で、その下には何も表示されていない。 ↓ 問題1の選択肢を選択した時点で初めて「問題その2」のテーブルが選択したラジオボタンによってどちらかひとつ表示される、という風にしたいのですが、教えていただけないでしょうか?

  • style=displayでの表示/非表示切り替え

    テーブルで表示させている内容をJavaScriptを使って行ごとに表示/非表示の切り替えができるようにしたのですが、表示させた時、IEでは通常のテーブル表示のように表示されるのですが、FirefoxやSafariでは何故かテーブルの一番左の<tr>要素内に全ての<td>要素が入る形で表示されてしまいます。多分CSSの書き方に関係していると思われるのですが、どなたか分かる方アドバイスをお願い致します。 下記は、コードの抜粋です。 [CSS] (略) #content { padding: 10px 0; width: 780px; float: left; } #inquiry { width: 600px; /* ボックスの幅を指定 */ margin-left: auto; margin-right: auto; } #inquiry table { border-top: 1px solid #CCCCCC; border-bottom: none; border-left: none; border-right: 1px solid #CCCCCC; font-size: 100%; width: 100%; } #inquiry td { border-top: none; border-bottom: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC; border-right: none; padding: 10px; text-align: center; } #inquiry th { border-top: none; border-bottom: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC; border-right: none; background-color: #F3F3F3; font-weight: normal; padding: 10px; } (略) [HTML] (略) <script type="text/javascript" src="../../webroot/js/prototype.js"></script> <script type="text/javascript"> <!-- function OnScreenHelp(id){ var elem = document.getElementsByClassName(id); for(var i=0;i<elem.length;i++) { elem[i].style.display = elem[i].style.display == "none" ? "block" : "none"; } } //--> </script> (略) <table border="border" summary="購入履歴" cellspacing="0"> <caption><h3>購入履歴</h3></caption> <tr> <th scope="col"><label for="name">注文番号</label></th> <th scope="col"><label for="name">ご注文日</label></th> <th scope="col"><label for="name">合計金額</label></th> <th scope="col"><label for="name">備考</label></th> </tr> <?php foreach($data1 as $row1) { $id = $row1['Order']['id']; ?> <tr onclick="OnScreenHelp(<?php echo $id; ?>)"> <td><?php echo h($row1['Order']['id']); ?></td> <td><?php echo h($row1['Order']['orderdate']); ?></td> <td><?php echo h($row1['Order']['total']); ?></td> <td><input type="text" name="name" size="30" id="name" class="text1" value="送料込み" /></td> </tr> <?php } ?> </table><br /> <table border="border" summary="明細情報" cellspacing="0"> <caption><h3>明細</h3></caption> <tr> <th scope="col"><label for="customerno">商品番号</label></th> <th scope="col"><label for="name">商品名</label></th> <th scope="col"><label for="price">価格</label></th> <th scope="col"><label for="quantity">数量</label></th> <th scope="col"><label for="subtotal">小計</label></th> </tr> <?php foreach($data2 as $row2) { $id = $row2['Orderitem']['order_id']; ?> <tr class="<?php echo $id; ?>" style="display:none;"> <td><?php echo h($row2['Product']['productno']); ?></td> <td><?php echo h($row2['Product']['name']); ?></td> <td><?php echo h($row2['Product']['price']); ?></td> <td><?php echo h($row2['Orderitem']['quantity']); ?></td> <td><?php echo h($row2['Orderitem']['subtotal']); ?></td> </tr> <?php } ?> </table> (略)

    • ベストアンサー
    • CSS
  • ラジオボタン→セレクトボックスで表示切替がしたい

    次のhtml文をラジオボタンではなく、セレクトボックスによる選択に変えることって不可能でしょうか。 参考にしたサイトはこちらです。 https://www.torat.jp/css-radiobotton/ 以下はそのソースです。 <form> <div class="form-check"> <input class="form-check-input" type="radio" name="maker" value="food" onclick="formSwitch()" checked> <label class="form-check-label"> 好きな食べ物</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="maker" value="place" onclick="formSwitch()"> <label class="form-check-label"> 好きな場所</label> </div> </form> <ul> <div id="foodList"> <li>お寿司</li> <li>アイスクリーム</li> <li>チーズケーキ</li> <li>お団子</li> </div> <div id="placeList"> <li>自由が丘</li> <li>下北沢</li> <li>吉祥寺</li> <li>高円寺</li> </div> </ul> <script> function formSwitch() { hoge = document.getElementsByName('maker') if (hoge[0].checked) { // 好きな食べ物が選択されたら下記を実行します document.getElementById('foodList').style.display = ""; document.getElementById('placeList').style.display = "none"; } else if (hoge[1].checked) { // 好きな場所が選択されたら下記を実行します document.getElementById('foodList').style.display = "none"; document.getElementById('placeList').style.display = ""; } else { document.getElementById('foodList').style.display = "none"; document.getElementById('placeList').style.display = "none"; } } window.addEventListener('load', formSwitch()); </script>

  • 2段階ラジオボタン後、DIVを表示したい

    色々と自力で試行錯誤しましたが、知識が足りません。 javaScriptのif構文とかswich構文の部分が問題かなぁ~と推測しますが、自力で構文を認識・改造が出来ませんので、ご指導をお願い致します。 1段目(ラジオ)<バス><電車> 2段目(ラジオ)<バス/高級><バス/普通> 2段目(ラジオ)<電車/高級><電車/普通> 3段目(DIV)<高級バス><バス><高級電車><電車> 2段目の動作がオカシイです。 連動している一方のみを表示したいです。(連動してないその他は、見えなくしたいです) 以下、ソースです。 <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <head> <style type="text/css"> .second , .third{ display: none; } </style> <script type="text/javascript"><!-- function AllHide() { document.getElementById('bus_high').style.display = 'none'; document.getElementById('bus_normal').style.display = 'none'; document.getElementById('train_high').style.display = 'none'; document.getElementById('train_normal').style.display = 'none'; } function SetSubMenu( idname ) { AllHide(); if( idname != "" ) { document.getElementById(idname).style.display = 'block'; } } // --></script> </head> <body> <form action=""> <label><input type="radio" name="move" value="bus" id="move_0" onClick="SetSubMenu(value);">バス</label> <label><input type="radio" name="move" value="train" id="move_1" onClick="SetSubMenu(value);">電車</label> </form> <form action=""> <div class="second" id="bus"> <label><input type="radio" name="grade" value="bus_high" id="grade_0" onClick="SetSubMenu(value);">バス/高級</label> <label><input type="radio" name="grade" value="bus_normal" id="grade_1" onClick="SetSubMenu(value);">バス/普通</label> </div> <div class="second" id="train"> <label><input type="radio" name="grade" value="train_high" id="grade_2" onClick="SetSubMenu(value);">電車/高級</label> <label><input type="radio" name="grade" value="train_normal" id="grade_3" onClick="SetSubMenu(value);">電車/普通</label> </div> </form> <div class="third" id="bus_high">高級バス</div> <div class="third" id="bus_normal">バス</div> <div class="third" id="train_high">高級電車</div> <div class="third" id="train_normal">電車</div> </body> </html>

  • IE6とIE7のHtmlレイアウトについて

    お世話になります。 現在、XHTMLで画面を作成しています。 Htmlのレイアウトについて、非常に困った問題が発生しています。 IE6で正常に表示されるものが、IE7では崩れて表示されてしまいます。 具体的にはテーブルの中身がIE6だと、 テーブル(右寄せ(本来の形)) ---------|----------------------------- aaa |テキストフィールド1 ---------|----------------------------- bbbbb |テキストフィールド2 ---------|----------------------------- 具体的にはテーブルのl中身がIE7だと、 テーブル(中央揃え(ずれている状態)) ---------|----------------------------- aaa | テキストフィールド1 ---------|----------------------------- bbbbb | テキストフィールド2 ---------|----------------------------- になってしまいます。(汚くて、判りづらくてすみません!!) 以下にHTMLを記載します。 <table align="center"> <div>    <tr>   <td> </td> </tr> </div> </table> <table border="1"> <tr id="trpattern"> <td width="200">              <labelid="reportpatternLabel"/></td>        <td width="350">   <selectid="patternItems"onchange="hide(this.value);"> <option id="pattern"> </option> </select><br></br> </td> </tr> <tr id="trarea"> <td width="200"><label id="selectAreaLabel"/></td> <td width="350"> <select id="areaItems" style="width:130;" onchange="selectNsc()"> <option id="area"> </option> </select><br></br> </td> </tr> <tr id="trnsc"> <div id="nscdiv"> <td width="200"> <label id="nscselectLabel"/></td> <td width="350"> <select id="nscItems" style="width:130;" onchange="fillnscList()"> <option id="nsc"> </option> </select><br></br> </td> </div> </tr> <tr id="trperiod"> <td width="200"><label id="periodLabel"/></td> <td width="350"> <input type="text" id="periodfrom"></input> <label id="symbolLabel"></label> <input type="text" id="periodto"></input> </td> </tr> <tr id="trlevel" style="display:none"> <td width="200"><label id="levelLabel"/></td> <td width="350"> <select id="levelItems"> <option id="level"> </option> </select><br></br> </td> </tr> <tr id="trcompare" style="display:none"> <td width="200"> <label id="compareAnotherLabel"/><label id="NSCAverageLabel"/></td> <td width="350"> <input type="radio" name="nscrdb" value="Yes" label="Yes" onclick="callshow(this.value);"></input> <label> Yes</label> <input type="radio" name="nscrdb" value="No" label="No" checked="checked" onclick="callshow(this.value);"></input> <label> No</label> </td> </tr> </table> --------------------------------------------------- どの様なタグ、方法を用いれば解消されるのでしょうか? どなたかご教授願いますでしょうか? お願いいたします!!

    • ベストアンサー
    • HTML
  • ラジオボタンではなくセレクトボックスで表の表示切換

    セレクトボックスで表の表示非表示を選択できるようにしたいです。最初は非表示で。jsで。 以下はその分です。 どこを変えたらいいですか。 <script type="text/javascript"> function Click_idbbb() {   if (document.all.idbbb.checked==true) {     document.all.bbb.style.display = "block"   } else {     document.all.bbb.style.display = "none"   } } function Click_idccc() {   if (document.all.idccc.checked==true) {     document.all.ccc.style.display = "block"   } else {     document.all.ccc.style.display = "none" document.getElementById('lng').innerHTML=tmp2; document.getElementById('table').innerHTML=tmp3; } </script> <div> <p> <input id ="idbbb" type="checkbox" name="kakikukeko"onclick="Click_idbbb()">かきくけこ <input id ="idccc" type="checkbox" name="sashisuseso"onclick="Click_idccc()">さしすせそ </p> <div id="bbb" style="display:none;">  <table border="1" cellspacing="2" cellpadding="0">   <tr><td>テーブル2<p></p></td></tr>  </table> </div> <div id="ccc" style="display:none;">  <table border="1" cellspacing="2" cellpadding="0">   <tr><td>テーブル3<p></p></td></tr>  </table> </div>

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

    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>

  • メールフォームのラジオボタンフィールドの件

    ホームページメールフォーム作成でご質問しました。 ラジオボタンとチェックボックスのフィールドで、その他項目を設けてテキストフィールドを作っているます。 このテキストフィールドにもラジオボタンまたは、チェックボックスのチェックを行えるようにできないでしょうか。 ○あああ ○いいい ○ううう ○えええ ○その他 □(ここにテキスト入力フィールド) ※javascriptを作る必要があるでしょうか。 下記のソースが、現状です。 <tr><td class="item_name">設問</td> <td class="item_form"> <table border="0" cellpadding="0" cellspacing="0"> <tr><td><input name="設問ABC" type="radio" value="Webサイト1" class="radio" id="toi2" /></td> <td valign="bottom"><label for="toi2">Webサイト1</label></td></tr> <tr><td><input name="設問ABC" type="radio" value="Webサイト22" class="radio" id="toi2" /></td> <td valign="bottom"><label for="toi2">Webサイト22</label></td></tr> <tr><td><input name="設問ABC" type="radio" value="Webサイト333" class="radio" id="toi2" /></td> <td valign="bottom"><label for="toi2">Webサイト333</label></td></tr> <tr><td><input name="設問ABC" type="radio" value="Webサイト555" class="radio" id="toi2" /></td> <td valign="bottom"><label for="toi2">Webサイト555</label></td></tr> </table> <div>その他:<input type="text" name="設問ABC" style="width:280px" /></div> </td></tr>

  • TABLEの行を非表示にした際の隙間

    テーブルの行をクリックアクションにて開閉したいのですが、 開いたテーブルを閉じた際に隙間ができてしまいます。 これはIE6で発生し、FireFox3では隙間無く閉じています。 IE6でも、この隙間を無くすことは可能でしょうか? ご教授願います。 現状のスクリプトは以下のようにしています。 (クリックするのは左上のプラス/マイナスの画像です) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <TITLE></TITLE> </HEAD> <BODY> <script type="text/javascript"> function close_list(){ document.getElementById("img").src = '../images/plus.gif'; document.getElementById("img").onclick = new Function(" open_list(); "); document.getElementById("mark").rowSpan = '1'; document.getElementById("tr_yuubin").style.display = 'none'; document.getElementById("tr_ken").style.display = 'none'; document.getElementById("tr_stat").style.display = 'none'; return; } function open_list(){ document.getElementById("img").src = '../images/minus.gif'; document.getElementById("img").onclick = new Function(" close_list(); "); document.getElementById("mark").rowSpan = '5'; document.getElementById("tr_yuubin").style.display = ''; document.getElementById("tr_ken").style.display = ''; document.getElementById("tr_stat").style.display = ''; return; } </script> <FORM> <TABLE width="755" border="1"> <TBODY align="left"> <TR> <TD width="15" align="center" id="mark" valign="top"><img name="img" id="img" src="../images/plus.gif" onclick="open_list()"></TD> <TD width="135" >タロウ </TD> <TD width=""> <INPUT type="checkbox" id="chk" name="chk" value="1">登録 </TD> </TR> <TR id="tr_yuubin" style="display: none;"> <TD width="135">郵便</TD> <TD><input name="yuubin" type="text" id="yuubin" style="width:150px" ></TD> </TR> <TR id="tr_ken" style="display: none;"> <TD width="135">都道府県</TD> <TD> <select style="width:400px"><option> </select> </TD> </TR> <TR height="20" id="tr_stat" style="display: none;"> <TD width="135">ステータス</TD> <TD> </TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML>

  • 初期状態でテーブルの非表示

    JavaScript初心者です。 チェックボックスをチェックされたときだけ テーブルを表示させるようにしたいのです。 いろいろ調べながらようやく出来たのですが、 最初にテーブルを非表示にしたいのに出来ません。 style="display:none"を指定すると非表示になるのではないのでしょうか?なにが間違っているのでしょうか?他の記述があるのでしょうか? function Click_idaaa() {   if (document.all.idaaa.checked==true) {     document.all.aaa.style.display = "block"   } else {     document.all.aaa.style.display = "none"   } } function Click_idbbb() {   if (document.all.idbbb.checked==true) {     document.all.bbb.style.display = "block"   } else {     document.all.bbb.style.display = "none"   } } <body> <div> <p><input id ="idaaa" type="checkbox" name="aiueo"   onclick="Click_idaaa()">あいうえお <input id ="idbbb" type="checkbox" name="kakikukeko"onclick="Click_idbbb()">かきくけこ</p> </div> <div id="aaa" style="display:none:">  <table border="1" class="input">   <tr><th><font size="-1">■テーブル1</font></th><td>   <input type="text" name="textfieldName" size="24"></td></tr>  </table> </div> <div id="bbb" style="display:none:">  <table border="1" cellspacing="2" cellpadding="0">   <tr><td>テーブル2<p></p></td></tr>  </table> </div> </body> 上記で行き詰ってしまい他の方法でと思い、 <body onload="Click_idaaa():Click_idbbb()"> と指定して非表示にさせようとしても出来ませんでした。 複数指定は:ではないのでしょうか? どの方法でもいいのでテーブル1と2を初期状態で非表示にしたいのです。

専門家に質問してみよう