Bootstrap4を使いテーブルをアコーディオンにする

<table>
<%
	for(int i=0;i<beanの.lengthの数分forを回す;i++)
	{
%>
 <tr>
  <th colspan="2"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse<%=i%>" aria-expanded="false" aria-controls="collapse<%=i%>">
   <%=beanからfor文を使い各項目名か何かを表示%>
  </button></th>
 </tr>
 <div id="collapse<%=i%>" class="collapse" aria-labelledby="heading<%=i%>" data-parent="#accordion">
	<div class="card-body">
 <tr>
  <th>データ1</th>
  <th>データ2</th>
 </tr>
<%

		for(int j=0;j<beanの.lengthでfor文を回す;j++)
		{
%>
 <tr>
  <td>
   <%=beanを使い名前か何かを表示する%>
  </td>
  <td>
   <%=同上%>
  </td>
  <td><input type="button" class="btn btn-outline-primary" value="編集" onClick="DispPerson(javascriptでこの名前の人の情報を編集する画面へ)"> 
 </td>
 </tr>
</div>
</div>
</div>
<%
		}
	}
%>
</div>
</table>

以上のようなtableに(色々試した跡が残っていますが...)Bootstrap4を使い、一番上のcolspanがかけられた<th>の<button>がクリックされたら<th>データ1と<th>データ2から下の<td>がずらっとアコーディオンで表示されるという様なイメージの物を作ろうと考えていました。

最初はcolspanがかけられた<th>しか表示されてない想定です。

ちなみにbean関連を曖昧な書き方にしているのは、なにか個人的な物を特定されそうな文字列が使われている可能性があったためです。

直接<tr>にbootstrapのクラスを書いてみたり<div>で囲んでみたりしてみましたが、まだ<table>の構造を理解出来ていないからか、上手く使う事が出来ませんでした。

各個々のデータを編集するための編集ボタンが右側からはみ出る事になっているので、もし邪魔であれば消しても問題ありません。

ちなみにbootstrapの知識は本を見ながら書いていたため、ほぼ0に近いです。

どの様にしたら自分のイメージした動きをしてくれるでしょうか。

--追記--

雑な作りだとは思いますが、イメージは伝わるかなと思います...。

親データ1を押したら親データ1が閉じる、2を押したら2が閉じるといったイメージです。

m.ts10806

2019/11/26 01:33

JSP記述は排除してブラウザから得られるHTMLを提示された方がアドバイスを得られやすくなると思います。あとBootstrapはドキュメントが充実しています。ドキュメントは確認されたのでしょうか？あと… tableタグでアコーディオンはかなり無理やりのような。どういう形をイメージしているのか図示されたほうが代替案ももらいやすくなると思います

TKM1165

2019/11/26 01:35

ドキュメント確認してないです、見てみます！やはりtableをアコーディオンにするのは難しいでしょうか。その他の方法や図示を考えてみます。

m.ts10806

2019/11/26 01:40

>図示を考えてみます。これはあくまで回答者に「こういう形のものを作りたい」と直接伝えるための手段を工夫してもらいたいためのもので、要は、質問を編集して追記いただきたいということです。

行動規範の内容に同意します

回答1件

ベストアンサー

table 直下に div は書けないので修正してください。
アニメーションのため、tr や td ではなくセル内の要素に class をつけてみてください。

HTML
1  <tr>
2   <th colspan="2"><button class="btn btn-link" type="button" data-toggle="collapse" data-target=".collapse0" aria-expanded="true">親データ1</button></th>
3  </tr>
4  <tr>
5   <th><div class="collapse show collapse0">データ1</div></th>
6   <th><div class="collapse show collapse0">データ2</div></th>
7  </tr>

https://developer.mozilla.org/ja/docs/Web/HTML/Element/table
https://getbootstrap.com/docs/4.3/components/collapse/#multiple-targets

投稿2019/11/26 03:21