부트 스트랩 CSS 동적 테이블 아코디언

Question

나는 어떻게 할 수 있고해야하는지에 대한 가능한 구현이나 아이디어를 찾고 있습니다. 기본적으로, 나는 아코디언으로 만들고 싶어 테이블을 가지고 있고 나는 여기에 한 다음이었다 :

http://www.bootply.com/fdTMNTiLis

문제는이 구현 "#의 데모 1", "#의 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 안내서를 참조하십시오.

당신은 javaScript``에서 선택의 지금까지 가장 효율적인 방법입니다 id``하여 데이터베이스 연결