mysql에서 php와 spry 또는 유사한 것을 사용하여 두 테이블을 표시합니다.

Question

저는 spp와 같은 PHP를 사용하여 mysql의 두 테이블에서 데이터를 표시하려고합니다. 원래는 spry 탭 패널을 사용하고 싶었지만 가능한지 확실하지 않습니다. 하나의 테이블에서 탭 이름을 채우고 해당 탭의 내용을 다른 테이블에서 채우도록합니다. 다음은 기본 HTML입니다.

<div id="TabbedPanels1" class="TabbedPanels"> 
    <ul class="TabbedPanelsTabGroup"> 
    <li class="TabbedPanelsTab" tabindex="0">NAME_1 POPULATED FROM FIRST TABLE</li> 
    <li class="TabbedPanelsTab" tabindex="0">NAME_2 POPULATED FROM FIRST TABLE</li> 
    </ul> 
    <div class="TabbedPanelsContentGroup"> 
    <div class="TabbedPanelsContent"> 
    <table border="0" cellspacing="5" cellpadding="5"> 
     <tr> 
<!-- CONTENT POPULATED FROM SECOND TABLE!--> 
      <td width="450">&nbsp;</td> 
      <td width="50">&nbsp;</td> 
      <td width="50">&nbsp;</td> 
      <td width="50">&nbsp;</td> 
      <td width="50">&nbsp;</td> 
     </tr> 
     </table></div> 
    </div> 
</div> 
</div> 

문제는 내가 탭을 콘텐츠에 연결할 수 없다는 것입니다. 탭은 html로 처음 나열되기 때문에 내용은 다음과 같습니다. 이것이 가능하거나 더 좋은 방법이 있는지 나는 모른다. 미리 도움을 주셔서 감사합니다.

Answer 1

최종 결과에 조금 달려 있습니다. 예를 들면 다음과 같습니다.

원하는 경우 테이블에서 가져온 탭 목록과 다른 DB 테이블에서 완성 된 내용 만 있으면 각 테이블에 대해 하나씩 2 개의 쿼리를 수행하고 결과를 변수에 저장하면됩니다. 그런 다음 변수 내부에서 HTML 구조를 완료하고 마지막으로이 변수의 에코를 수행 할 수 있습니다.

// $result1 has the info of the tab names. 
// $result2 has the contents of each tab. 
$final_html='<div id="TabbedPanels1" class="TabbedPanels"> 
      <ul class="TabbedPanelsTabGroup">'; 

while($row1=$result1->mysqli_fetch_array()){ 
    $final_html.="<li class=\"TabbedPanelsTab\" tabindex=\"0\">$row1[0]</li>"; 
} 

$final_html.='</ul><div class="TabbedPanelsContentGroup"> 
       <div class="TabbedPanelsContent"> 
       <table border="0" cellspacing="5" cellpadding="5"> 
       <tr>'; 

while($row2=$result2->mysqli_fetch_array()){ 
    $final_html.="<td width=\"450\">$row2[0]</td>"; 
} 

$final_html.='</tr></table></div></div></div></div>'; 

echo $final_html; 

문제를 해결하는 방법은 Jquery입니다.

주요 아이디어는 탭과 탭 내용에서 동일한 변수를 기반으로하는 ID를 사용하는 것입니다. 예를 들어 한 탭의 이름은 'tab1'이고 그 내용은 'tab1content'로 지정할 수 있습니다.

Jquery 파트에 대한 자세한 내용을 보려면 코드 일부를 게시하여 이러한 탭이 어떻게 작동하는지 확인하십시오.