- ベストアンサー
JavaScriptでの配列表示の表示制御
- JavaScriptを使用して、Javaの配列をJSPでテーブルに表示する際に、最初の要素だけを表示し、残りの要素は非表示にしたいです。
- 「開く」ボタンを押すと、配列の残りの要素が表示されるような仕組みを実装したいです。
- 現在はすべての要素が表示されていますが、JavaScriptを使って条件に応じて要素を表示制御する方法が分かりません。
- pugr129
- お礼率100% (17/17)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 jQueryが使えるのであれば以下のような感じで実装できると思います。 jQueryが使えない環境ですともう少しゴリゴリに書く必要があります。 動作原理は trのdataクラスはデフォルトで非表示(CSSにて) ページ読み込み後に最初のtr.dataクラスについて表示 (この時点でヘッダ部と1行目が表示) 開くボタンでdispが呼ばれるとtr.dataクラス全てを表示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScriptでの配列表示の表示制御</title> <style type="text/css"> table { width:200px;border:solid 1px #000;border-collapse:collapse; } th,td { border:solid 1px #000; } tr.data { display:none; } </style> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript"> $().ready ( function() { $('table tr.data:first').show(); }); function disp () { $('table tr.data').show(); } </script> </head> <body> <input type="button" value="開く" onclick="disp();" /> <table> <tr><th>配列</th></tr> <tr class="data"><td>1</td></tr> <tr class="data"><td>2</td></tr> <tr class="data"><td>3</td></tr> <tr class="data"><td>4</td></tr> <tr class="data"><td>5</td></tr> <tr class="data"><td>6</td></tr> <tr class="data"><td>7</td></tr> <tr class="data"><td>8</td></tr> <tr class="data"><td>9</td></tr> <tr class="data"><td>10</td></tr> </table> </body> </html>
その他の回答 (1)
- utun01
- ベストアンサー率40% (110/270)
tableを使わないテーブルのご提案。 こんな雰囲気はどうでしょう？ <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#tblrow1').click(function(){ $('#tblrows').animate({ height: "toggle" }); }); }); </script> <style type="text/css"> div { font-size: 18px; color: #000000; } #tblwrapper { width: 600px; } #tblrows { display: none; } .tblrow #tblrow1 { height: 20px; width: 600px; } .clm1, .clm2, .clm3 { height: 18px; float: left; border: 1px solid #000000; } .clm1 { width: 98px; } .clm2 { width: 248px; } .clm3 { width: 248px; } </style> </head> <body> <div id='tblwrapper'> <div id='tblrow1'> <div class='clm1'>test</div> <div class='clm2'>test</div> <div class='clm3'>test</div> </div> <div id='tblrows'> <div class='tblrow'> <div class='clm1'>test</div> <div class='clm2'>test</div> <div class='clm3'>test</div> </div> <div class='tblrow'> <div class='clm1'>test</div> <div class='clm2'>test</div> <div class='clm3'>test</div> </div> <div class='tblrow'> <div class='clm1'>test</div> <div class='clm2'>test</div> <div class='clm3'>test</div> </div> </div> </div> </body> </html>
お礼
ご回答ありがとうございます！ こういった書き方もあったのですね。大変参考になりました。 今回はtableでの記述にしてしまいましたが、 今度このやり方でも練習で書いてみようと思います。 誠にありがとうございました。
お礼
早速のご回答ありがとうございます。 jQueryを既に使用していたので、CSSと併せて お教え頂いたやり方で実装することができました！ わかりやすく教えて頂きまして誠にありがとうございました。