- ベストアンサー
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">テスト１</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>
- sheer
- お礼率86% (13/15)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
要するに、テーブルに行の追加・削除したいということだったら 参考ＵＲＬが参考になるかと思います。 表示・非表示の線では、 <tr id="test1" style="display:none"> とか <tfoot id="test1" style="display:none"> でＩＥの場合はうまく行きましたが、FireFoxの場合うまくいきませんでしたので、行の追加・削除でやるのがいいかと思います。
その他の回答 (1)
- fazan
- ベストアンサー率33% (5/15)
拝見しました。 質問の２行という意味がわかりませんが、 単純にコメントの部分に２行記述すればいいのではないですか？ ２行という具体的な提示をして頂ければ回答もできるかと思います。
補足
ありがとうございます。2行というのは、初期表示されている表の下に行を2行追加表示させたいという事です。 ただ、下記のように記述しても、上手く動作しません。 <div id="test1" style="display:none;"> <tr> <td width="134"> <p> </p> </td> <td width="217"> <p> </p> </td> </tr> </div>
お礼
ありがとうございます。おかげで実装する事ができました。