JavaScriptでの配列表示の表示制御

2023/10/22 23:32

このQ&Aのポイント

JavaScriptを使用して、Javaの配列をJSPでテーブルに表示する際に、最初の要素だけを表示し、残りの要素は非表示にしたいです。
「開く」ボタンを押すと、配列の残りの要素が表示されるような仕組みを実装したいです。
現在はすべての要素が表示されていますが、JavaScriptを使って条件に応じて要素を表示制御する方法が分かりません。

ベストアンサー

JavaScriptでの配列表示の表示制御

2012/01/18 16:16

Javaの配列をJSPでテーブルに表示する際に、配列の最初の要素(1つ)だけを表示して、残りの要素はデフォルト非表示にしたいです。「開く」ボタンを押下すると、配列の残りの要素を表示する、というような作りにしたいのですが JavaScript部分をどう書いたら実装できるかがわかりません。今現在、全表示時で下のような感じです。ご教授お願い致します。似たようなページがありましたらお教え頂けると幸いです。 <table> <tr> <th>配列</th> </tr> <c:forEach items="${配列型}" var="あ"> <tr> <td><c:out value="${あ.中身}" /></td> </tr> </c:forEach> </table> <input type="submit" value="開く" onclick="toOpen()"></input>

pugr129
お礼率100% (17/17)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

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

ベストアンサー

LancerVII
ベストアンサー率51% (1060/2054)

2012/01/18 16:49 回答No.1

こんにちは。 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>

質問者

お礼 2012/01/19 18:40

早速のご回答ありがとうございます。 jQueryを既に使用していたので、CSSと併せてお教え頂いたやり方で実装することができました！わかりやすく教えて頂きまして誠にありがとうございました。

その他の回答 (1)

utun01
ベストアンサー率40% (110/270)

2012/01/18 17:49 回答No.2

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>

質問者

お礼 2012/01/19 18:42

ご回答ありがとうございます！こういった書き方もあったのですね。大変参考になりました。今回はtableでの記述にしてしまいましたが、今度このやり方でも練習で書いてみようと思います。誠にありがとうございました。

関連するQ&A

配列の使い方
JavaScript 初心者です。下記ソースでinput type="text"でname="kazu1,name="kazu2"のように２個限定で使っているのですが将来的にＤＢから読んだ数分に変わる予定です。その場合 eval(document.myForm.kazu1.value)+　の表現はどのように変えたらいいでしょうか。配列の数はi7で持ってきています。 <script language="JavaScript"></script> </head> <table border=1> <tr> <td width="40%" ><input type="text" name="kazu1" value="10">%</td> <td width="40%" ><input type="text" name="kazu2" value="10">%</td> </tr> <tr> <td><input type="submit" name="button" value="keisan" onClick="ttlValue(2)" ></td> <td></td> </tr> </table> </form>
- ベストアンサー
- JavaScript
javascriptによる計算
テキストボックス「a1～6」の値とテキストボックス「b1～6」に入力された値を足し算してテキストボックス「ｃ1～6」（例…c[i] = a[i] + b[i]）を計算するJavaScriptを作成しているのですが、結果がundefinedになってしまい上手くいきません。どうやったら動くのかどうかご教授ください。以下ソース↓ <script language ="JavaScript"> function plus() { var intResult = 0; for (i=1; i<=6; i++){ intResult[i] = 0; if (!isNaN(document.forms["A"].all["a"+i].value) && !isNaN(document.forms["B"].all["b"+i].value)){ intResult[i] += parseInt(document.forms["A"].all["a"+i].value); intResult[i] += parseInt(document.forms["B"].all["b"+i].value); } <table border = 1> <tr> <td> <table border = 1> <tr> <td> <form name="A"> <input type = "text" size = 5 name = "a1"></input> </td> <td> <input type = "text" size = 5 name = "a2"></input> </td> <td> <input type = "text" size = 5 name = "a3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "a4"></input> </td> <td> <input type = "text" size = 5 name = "a5"></input> </td> <td> <input type = "text" size = 5 name = "a6"></input> </form> </td> </tr> </table> </td> <td> <table boeder = 1> <tr> <input type = "button" onClick="plus()" value = "＋"></input> </tr> </table> </td> <td> <table border = 1> <tr> <td> <form name = "B"> <input type = "text" size = 5 name = "b1"></input> </td> <td> <input type = "text" size = 5 name = "b2"></input> </td> <td> <input type = "text" size = 5 name = "b3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b4"></input> </td> <td> <input type = "text" size = 5 name = "b5"></input> </td> <td> <input type = "text" size = 5 name = "b6"></input> </form> </td> </tr> </table> </td> </tr> </table> 答え <form name = "C"> <table border = 1> <tr> <td> <input type = "text" size = 5 name = "c1"></input> </td> <td> <input type = "text" size = 5 name = "c2"></input> </td> <td> <input type = "text" size = 5 name = "c3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "c4"></input> </td> <td> <input type = "text" size = 5 name = "c5"></input> </td> <td> <input type = "text" size = 5 name = "c6"></input> </td> </tr> </table> </form> </body> document.C.all["c"+i].value = intResult[i]; } } </script>
- ベストアンサー
- JavaScript
動的なtableの値を取得したい
いつもお世話になります。見よう見まねでやっている超初心者です。下記の様なテーブル（phpで読み込んでいますので実際は動的です。）の回答ボタンをクリックするとテーブル下の<INPUT type="text" name="kotae">にボタンをクリックされた行のｂ列の値を入れたいと思っています。 function　kaito()をどのように書いたら取得できるか悩んでいます。初心者なもので具体的な回答でしたら助かります。ご教授の程どうぞよろしくお願い致します。 <html> <head> <meta content="text/html; charset=utf-8" /> <script> </script> </head> <body> <table width="100" border="1"> <tr> <th width="30" scope="col">a</th> <th width="30" scope="col">b</th> <th width="40" scope="col">c</th> </tr> <tr> <td>1</td> <td>2</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td><td>3</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td> <td>4</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td> <td>5</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> </table> <INPUT type="text" name="kotae" size="12" > </body> </html>
- ベストアンサー
- JavaScript
プルダウンによる表示制御方法
プルダウンの選択内容による表示の切り替えを行いたいです。例えば、AとCを選択すると下にあるテキストボックスが非表示になり Bを選択するとテキストボックスが表示するように制御を行いたいです。 <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td> <form name="a"> <SELECT NAME="b"> <OPTION SELECTED> <OPTION VALUE="0">A <OPTION VALUE="1">B <OPTION VALUE="2">C </SELECT> </td></tr> <tr><td> <input type="text" size="6" maxlength="5" name="text1" value=""> </td></tr> </form> </table></form></td></tr></table> すみませんが、よろしくお願い致します。
- ベストアンサー
- HTML
javascriptで電卓を作成
プログラミングをまったくやったことがない状態から、ドットインストールやテックアカデミーのHTML,CSS,Javascriptの入門動画をすべて見終わった段階ですので、基本的な仕組みと関数やfor文、if文、while文、などについてくらいは理解しています。今回、javascriptを使って電卓のシステムを組む、という課題があり、ネットで検索してやってみてはいるのですが行き詰っています。最初は以下のような形で作成をしていました。 <body> <form name="myform"> 　<table border="1"> <tr> <td colspan="4"> <input type="text" name="result" value="" id="result"> </td> </tr> <tr> <td><input type="button" value="　"onclick="calc(' ')" ></td> <td><input type="button" value="％"onclick="calc('%')"></td> <td colspan="2"> <input type="button" value="AC" onclick="calc('AC')"></td> </tr> <tr> <td><input type="button" value="７" onclick="calc('７')"></td> <td><input type="button" value="８" onclick="calc('８')"></td> <td><input type="button" value="９" onclick="calc('９')"></td> <td><input type="button" value="÷" onclick="calc('÷')"></td> </tr> <tr> <td><input type="button" value="４"onclick="calc('４')" ></td> <td><input type="button" value="５"onclick="calc('５')" ></td> <td><input type="button" value="６"onclick="calc('６')"></td> <td><input type="button" value="×" onclick="calc('×')"></td> </tr> 　 <tr> <td><input type="button" value="１" onclick="calc('１')" ></td> <td><input type="button" value="２" onclick="calc('２')"></td> <td><input type="button" value="３" onclick="calc('３')"></td> <td><input type="button" value="－" onclick="calc('－')"></td> </tr> <tr> <td><input type="button" value="０" onclick="calc('０')" ></td> <td><input type="button" value="＋" onclick="calc('＋')"></td> <td colspan="2"> <input type="button" value="＝" onclick="calc('＝')"></td> </tr> </form> <script> function calc(a) { if (a === "=") { document.myform.kekka.value = eval(document.myform.kekka.value); } else if (a === "AC") { document.myform.kekka.value = ""; } else { document.myform.kekka.value += a; } </script> </body> </html> ですが、onclickとevalを使わず、代わりに「addEventListner」を用いるよう指示されました。「addEventListner」に関しては、検索してなんとかざっと理解したのですが、それ以前に、電卓の基本的な関数の組み方を理解していないため、いまいちどこから手をつけたらいいかわかりません。いろんなサイトを見ているといろんなやり方がでてきますが、ope=+,やflag=0などの表記をよく見かけます。が、この意味もいまいちわかっていません。。初心者すぎるので、何かアドバイスをいただけますと幸いです。宜しくお願いいたします。また、このような初心者が使いこなせるようになるために向いている動画や書籍、ページがありましたら教えていただけますと助かります。
- 締切済み
- JavaScript
smarty　列行数制御方法
こんにちは、下記文章があるのですが、今の状態だとデータ分だけ行数が増えていくので、これを 3列表示したら改行して、次の行で表示としたいのですが、どのようなロジックで行えばよいのでしょうか？ <table class="outer"> <{foreach item="value" from=$values}> <tr> <td> <input type="checkbox" name="checked[]" value="<{$value.id}>" <{$value.checked}> > <{$value.title}> </td> </tr> <{/foreach}> </table>
- ベストアンサー
- PHP
ラジオボタンを一括で操作する方法を教えてください。javascript
下記のようにフォームがあります。チェックボックスをクリックして始めて、同列のラジオボタンが選択できるようにしたいと考えております。現在は、質問1のみですが質問の数がその下に増えていくと考えた場合、（例えば質問10まであると仮定して考えてください。）どのようにスクリプトを書いていけば、スマートになるかお知恵を貸していただけませんでしょうか？よろしくお願いいたします。 <form name="form1"> <table><tr> <th><input type="checkbox" name="q1_1" value="" onClick="quetion()">質問1</th> <td><input type="radio" name="q1_1a" value="a" disabled ></td> <td><input type="radio" name="q1_1a" value="b" disabled ></td> <td><input type="radio" name="q1_1a" value="c" disabled ></td> </table></form>
- ベストアンサー
- JavaScript
連想配列から<th>を含むテーブルを作成する関数
連想配列からテーブル(<th>テーブルヘッダ項目を含む）を作成する関数を作ろうと思っています。配列と関数をどのように書けばHTMLのソースのようになるでしょうか？値によって、<td>と<th>を振り分けるようになど良い方法を教えてください。（1.できれば配列で<td>　</td>は省略したいと思います。）（2.<th>　</th>の指定場所は下のhtmlのように縦とか横とかにに変えられた方が良いです。） //-----　関数　----- function table($v) { } //-----　配列　----- $s = array(); $s[0] = array( 'A-1' , 'B-1' , 'C-1' , 'D-1' , 'E-1' ); $s[1] = array( 'A-2' , 'B-2' , 'C-2' , 'D-2' , 'E-2' ); $s[2] = array( 'A-3' , 'B-3' , 'C-3' , 'D-3' , 'E-3' ); $s[3] = array( 'A-4' , 'B-4' , 'C-4' , 'D-4' , 'E-4' ); $s[4] = array( 'A-5' , 'B-5' , 'C-5' , 'D-5' , 'E-5' ); table($s); //-----　生成されるhtml　----- <table> <tr><th>A-1</th><th>B-1</th><th>C-1</th><th>D-1</th><th>E-1</th></tr> <tr><td>A-2</td><td>B-2</td><td>C-2</td><td>D-2</td><td>E-2</td></tr> <tr><td>A-3</td><td>B-3</td><td>C-3</td><td>D-3</td><td>E-3</td></tr> <tr><td>A-4</td><td>B-4</td><td>C-4</td><td>D-4</td><td>E-4</td></tr> <tr><td>A-5</td><td>B-5</td><td>C-5</td><td>D-5</td><td>E-5</td></tr> </table> <table> <tr><th>A-1</th><td>B-1</td><td>C-1</td><td>D-1</td><td>E-1</td></tr> <tr><th>A-2</th><td>B-2</td><td>C-2</td><td>D-2</td><td>E-2</td></tr> <tr><th>A-3</th><td>B-3</td><td>C-3</td><td>D-3</td><td>E-3</td></tr> <tr><th>A-4</th><td>B-4</td><td>C-4</td><td>D-4</td><td>E-4</td></tr> <tr><th>A-5</th><td>B-5</td><td>C-5</td><td>D-5</td><td>E-5</td></tr> </table> //-----　考え中？？の配列　----- $s = array(); $s[0] = array( '<th>A-1</th>' , '<th>B-1</th>' , '<th>C-1</th>' , '<th>D-1</th>' , '<th>E-1</th>' ); $s[1] = array( 'A-2' , 'B-2' , 'C-2' , 'D-2' , 'E-2' ); $s[2] = array( 'A-3' , 'B-3' , 'C-3' , 'D-3' , 'E-3' ); $s[3] = array( 'A-4' , 'B-4' , 'C-4' , 'D-4' , 'E-4' ); $s[4] = array( 'A-5' , 'B-5' , 'C-5' , 'D-5' , 'E-5' ); table($s); $s = array(); $s[0] = array( 'th' => 'A-1' , 'B-1' , 'C-1' , 'D-1' , 'E-1' ); $s[1] = array( 'th' => 'A-2' , 'B-2' , 'C-2' , 'D-2' , 'E-2' ); $s[2] = array( 'th' => 'A-3' , 'B-3' , 'C-3' , 'D-3' , 'E-3' ); $s[3] = array( 'th' => 'A-4' , 'B-4' , 'C-4' , 'D-4' , 'E-4' ); $s[4] = array( 'th' => 'A-5' , 'B-5' , 'C-5' , 'D-5' , 'E-5' ); table($s); //-----　参考中のソース　----- //--　http://okwave.jp/qa/q8107250.html function table($v) { echo '<table>'; foreach ($v as $t1) { echo '<tr>'; foreach ($t1 as $t2) { echo '<td>' . $t2 . '</td>'; } echo '</tr>'; } echo '</table>'; }
- ベストアンサー
- PHP
PHPの多次元配列について
HTMLでホームページを作れる以外はプログラムに関しほぼ素人です。環境 XAMPP1.70（最新）にてアパッチなど一括ダウンロード PHP言語にて3×4の表で以下の数値を多次元配列にて作成しようと思っているのですが、当方初心者なもので、以下のコード（細かい部分は省略しています）、特にforeachがネストになっている部分の処理の流れがいまいちよくわかりません～～～～～～～～～～～～～～～～～～～～～～～～～ <table border=2> <th>都市名</th> <th>最高気温</th> <th>最低気温</th> <?php　 $data=array( array("東京"32,25) array("名古屋",45,67) array("埼玉",32,67) array("大阪",86,34) ) foreach($data as $city){ print "<tr>"; foreach($city as $value){ print "<td>{$value}</td>"　　　　●1回目foreachからここまでの流れがいまいち分かりません } print "</tr>"; ?> ～～～～～～～～～～～～～～～～～～～～一つ目のforeachにて、配列$dataが指定されていますので外側の配列を処理していくと思うのですが、具体的にどういう順番で処理されていくのでしょうか。またforeach（）の中の"$cityが最終的に$valueに格納という形になっていますが、10～13行目のarray（"東京",32,25）とどのような関係で処理されていっているのか教えていただけませんでしょうか。よろしくお願いいたします。
- ベストアンサー
- PHP
【PHP】smartyとPHPの記述違いとメリット
smartyというのが、デザインとプログラムを分けれるというので使ってみたのですが、 //--------------------smarty--------------------- <table border=1> <tr> <th>{$table.title}</th> </tr> {foreach item=result from=$data_list} <tr> <td>{$result[0]}</td> </tr> {/foreach} </table> と、smarty用の記述をHTML内にいろいろ書かなければならず //------------------php---------------------- <table border=1> <tr> <th><?=$table[title] ?></th> </tr> <?php foreach($data_list as $key => $value){ ?> <tr> <td><?= $value ?></td> </tr> <?php } ?> </table> とHTML内にPHPをいろいろ書くのと　あまり大差無い気がして　どういう点がよいのがイマイチ分かりません。 smartyは　使う　メリットは　どういうものがあるのでしょうか。
- ベストアンサー
- PHP

JavaScriptでの配列表示の表示制御

JavaScriptでの配列表示の表示制御