• ベストアンサー

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>

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

  • ベストアンサー
  • 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

専門家に質問してみよう