• ベストアンサー

JavaScriptでの表の行の表示・非表示の切り替え

現状では、テスト1を選んだときだけテキストを出すことはできるのですが、どうしても2行表示するという事ができません。 テスト1を選択した時だけ2行表示し、テスト1以外を選択した時は非表示にするにはどうすればよいのでしょうか。 <html> <head> <title>テスト</title> <script type="text/javascript" language="JavaScript"> <!-- function showthis(sel) { var value = sel.options[sel.selectedIndex].value; if(value == "test1"){ if(document.getElementById){ if(document.getElementById(value).style.display == "block"){ document.getElementById(value).style.display = "none"; }else{ document.getElementById(value).style.display = "block"; } } } else if(value != "test1"){ if(document.getElementById){ document.getElementById("test1").style.display = "none"; } } } // --> </script> </head> <body> <table border="1" width="367"> <tr> <td width="134"> <form> <select onchange="showthis(this)"> <option selected="selected">選んでください</option> <option value="test1">テスト1</option> <option value="test2">テスト2</option> <option value="test3">テスト3</option> </select> </form> </td> <td width="217"> <p>テスト</p> </td> </tr> <tr> <td width="134"> <p>&nbsp;</p> </td> <td width="217"> <p>&nbsp;</p> </td> </tr> </table> <div id="test1" style="display:none;"> (本来はここに2行追加したい) </div> </body> </html>

  • sheer
  • お礼率86% (13/15)

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

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

要するに、テーブルに行の追加・削除したいということだったら 参考URLが参考になるかと思います。 表示・非表示の線では、 <tr id="test1" style="display:none"> とか <tfoot id="test1" style="display:none"> でIEの場合はうまく行きましたが、FireFoxの場合うまくいきませんでしたので、行の追加・削除でやるのがいいかと思います。

参考URL:
http://okwave.jp/kotaeru.php3?qid=1797452
sheer
質問者

お礼

ありがとうございます。おかげで実装する事ができました。

その他の回答 (1)

  • fazan
  • ベストアンサー率33% (5/15)
回答No.1

拝見しました。 質問の2行という意味がわかりませんが、 単純にコメントの部分に2行記述すればいいのではないですか? 2行という具体的な提示をして頂ければ回答もできるかと思います。

sheer
質問者

補足

ありがとうございます。2行というのは、初期表示されている表の下に行を2行追加表示させたいという事です。 ただ、下記のように記述しても、上手く動作しません。 <div id="test1" style="display:none;"> <tr> <td width="134"> <p>&nbsp;</p> </td> <td width="217"> <p>&nbsp;</p> </td> </tr> </div>

関連するQ&A

  • 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>

  • 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で質問です2

    セレクトボックスから選択してテキストや画像を出力する以下のコードがあるのですが、これをセレクトボックスを2段階で選択後にテキストや画像を出力したいのです。 詳しい方がいらっしゃれば、ご教示いただければ幸いです。よろしくお願いいたします。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5" style="display:none;"> <p>two</p> </div> <div id="Box3" class="my-5" style="display:none;"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>

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

    セレクトボックスで表の表示非表示を選択できるようにしたいです。最初は非表示で。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>

  • Javascript web テーブルにカーソルを載せると、説明文を表示するプログラム

    タイトルの通りのプログラムを作ったのですが、ファイルを開いた時から説明文が表示されてしまいます。開いた時に表示されなくするには、どのようにすればよいのでしょうか? ソースは↓になります。よろしくお願いいたします。 <html> <head> <script type="text/javascript"> <!-- function display_INIT() { document.getElementById('discript01').style.display='none'; } function display_ON(itm) { if(itm == 1) { document.getElementById('discript01').style.display='block'; } } function display_OFF(itm) { if(itm == 1) { document.getElementById('discript01').style.display='none'; } } // --> </script> </head> <table> <tr onmouseover="display_ON(1)" onmouseout="display_OFF(1)"> <td width="16%" align="center" bgcolor="EBEBEB" nowrap>test </td> <td width="16%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> </tr> <tr id="discript01"> <td colspan="6">(只今テスト中) </td> </tr> </table> </html>

  • javascriptがIEで機能しない

    ヘッダー内 <script language="JavaScript"> <!-- function view_ctrl() { selectvalue = document.form1.select1.options[form1.select1.selectedIndex].value; if(document.getElementById) { document.getElementById("block1").style.display = "none"; if(selectvalue=="選択1"){ document.getElementById("block1").style.display = "block" } } } // --> </script> ボディー内 <form name="form1"> <select name="select1" onchange="view_ctrl()"> <option value="">選択してください</option> <option>選択1</option> <option>選択2</option> </select> </form> <table><tr><td><div id="block1" style="display:block">表示</div></td></tr></table> Firefox3.6ではうまく選択肢によって表示非表示にできたのですが、IE8では選択1を選択しても非表示のままです どこを修正してやればいいでしょうか? ぜひ御指南ください。

  • 要素の表示/非表示の実験

    をしてみました。 <input type="button" onclick="f()" value="push"/> <input type="button" onclick="g()" value="push"/> <table> <tr><td>a</td><td>b</td><td>c</td></tr> <tr id="x"><td>x</td><td>y</td><td>z</td></tr> <tr><td>u</td><td>v</td><td>w</td></tr> <tr id="y"><td>x</td><td>y</td><td>z</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> </table> <script> function f() { var x=document.getElementById('x').style.visibility; if(x=='hidden') document.getElementById('x').style.visibility='visible'; else document.getElementById('x').style.visibility='hidden'; } function g() { var x=document.getElementById('y').style.display; if(y!='none') document.getElementById('y').style.display='none'; else document.getElementById('y').style.display='block'; } </script> です。 最初のボタンは単に表示するかどうかだけで位置は消えた場所に詰められません。 次のボタンは消えるとその場所に他の要素が詰められます。しかし消えたものは次にボタンを押しても消えたままです。 消えた場所に要素が詰められしかも再表示できるようにするにはどうしたらいいのでしょうか?

  • 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"> <!-- //表示変更 function showthis(obj) { if(!obj) return false; if(document.getElementById) { for( i=0; i<=5; i++ ){ document.getElementById( "1_"+ i ).style.display = "none"; document.getElementById(obj).style.display = "block"; } } else { return false; } } --> </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"> 1 - いち</option> <option value="1_2"> 2 - に-</option> <option value="1_3"> 3 - さん</option> <option value="1_4"> 4 - よん</option> <option value="1_5"> 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>【1 - いち】</p> </div> <div id="1_2" style="display: none;"> <p>【2 - に-】</p> </div> <div id="1_3" style="display: none;"> <p>【3 - さん】</p> </div> <div id="1_4" style="display: none;"> <p>【4 - よん】</p> </div> <div id="1_5" style="display: none;"> <p>【5 - ご】</p> </div> </div> </td> </tr> </table> </div> <input type="submit" name="" value="次へ進む"> </form> </body> </html>

  • ラジオのチェックでフォーム表示、PHPへPOSTさせたい

    見よう見まねで作成したのですが、わからないので教えてください。 ラジオボタンのOKをクリックするとアカウントとパスワードの入力フォーム、ログインボタンが表示され、aaa.phpに飛びたいです。 「OK」で表示、「NO」で非表示はなんとかできましたが、問題が2点あります。 1.test.htmlにアクセスしたときすでに「OK」にチェックがついていて、テキストエリアとログインボタンが表示されてしまいます。 「NO」のほうにcheckedをいれてみましたがダメでした。 2.phpへとばず、test.htmlにとんでしまいます。 宜しくお願いいたします。 test.html - - - - - - - - - - - - - - - - - - - <script type="text/javascript"> <!-- function Sel(me){ if(me.value=="1"){ me.form.account.disabled=false; me.form.password.disabled=false; me.form.btn.disabled=false; document.getElementById('SelA').style.display=(document.all)? 'block':'table-row'; document.getElementById('SelB').style.display='none'; }else{ me.form.account.disabled=true; me.form.password.disabled=true; me.form.btn.disabled=true; document.getElementById('SelA').style.display='none'; document.getElementById('SelB').style.display='none'; } } //--> </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="Sel(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ですか??

    以下のソースはJavaScriptになりますか? HPを(初心者ながら)作っているのですが JavaScriptを使うとパソコンのブラウザなどによっては違うように見えると聞きました。 以下のソースがJavaScriptなら、どのへんがどんな風に違って見えるのでしょうか? <table cellspacing="0" cellpadding="0" style="width:250px;font-size:13px;color:#000"><tbody><tr style="text-align:center"><td style="border-width:1px 1px 0 1px;border-style:solid;border-color:#000"><div style="background:#ffcccc;border-bottom:1px solid #ffcccc;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME1" onclick="document.getElementById('NAME4').style.backgroundColor='#ffcccc';document.getElementById('NAME1').style.borderColor='#ffcccc';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME11').innerHTML"> タブ1 </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ff6699;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME2" onclick="document.getElementById('NAME4').style.backgroundColor='#ff6699';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#ff6699';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME22').innerHTML"> タブ2 </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ffeeee;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME3" onclick="document.getElementById('NAME4').style.backgroundColor='#ffeeee';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#ffeeee';document.getElementById('NAME4').innerHTML=document.getElementById('NAME33').innerHTML"> タブ3 </div></td><td style="width:100%;border-bottom:1px solid #000">&nbsp;</td></tr><tr><td colspan="4"><div style="border-width:0 1px 1px 1px;border-style:solid;border-color:#000;background:#ffcccc;padding:10px;height:130px" id="NAME4"> ここにタブ1の文章 </div></td></tr></tbody></table> <div style="display:none" id="NAME11"> ここにもタブ1の文章 </div><div style="display:none" id="NAME22"> ここにタブ2の文章 </div><div style="display:none" id="NAME33"> ここにタブ3の文章 </div>