ブートストラップCSSダイナミックテーブルアコーディオン

Question

私は可能な実装やアイデアを探しています。基本的に、私は私がアコーディオンにしたいテーブルを持っていると私はここで1次となっている。

http://www.bootply.com/fdTMNTiLis

問題は、この実装は、「＃1 DEMO1」、「＃のDEMO2例えば着手したということです"これはデータとすべてを知っていても問題ありませんが、私の実装はデータベースから来ている製品を対象としているため、"＃demo1 "は製品IDだけです。

私の質問は、IDを含むそれぞれに非表示の行を作成する必要なくこの情報を表示するには、もっとエレガントな方法がありますか？

Answer 1

HTMLページのすべてのデータを視覚化するために、すべてのデータ（ジョブ名 - 説明 - プロバイダ名 - リージョンステータス）とThymeleafにデータベースを使用できます。

など。

<tr th:each="datas : ${data}" 
        th:attr="data-dataId=${data.id}" data-toggle="collapse" data-target="#demo1" class="accordion-toggle"> 
       <td><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button></td> 
     <td th:text="|${data.name}|">OBS Name</td> 
     <td th:text="|${data.description|">OBS Description</td> 
     <td th:text="|${data.cloud}|">hpcloud</td> 
     <td th:text="|${data.nova}|">nova</td> 
     <td> created</td> 

    </tr> 

詳細については、Thymeleafのガイドをお読みください。あなたはid` `によってデータベース接続