選項卡式窗格中的表格

Question

我有類似的東西。

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Tab 1</a></li> 
     <li><a href="#tabs-2">Tab 2</a></li> 
     <li><a href="#tabs-3">Tab 3</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Tab 1 content</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Tab 2 content</p> 
    </div> 
    <div id="tabs-3"> 
     <p>Tab 3 content</p> 
    </div> 
</div> 

而不是每個選項卡中的內容（選項卡1內容...），我需要表。所有3個選項卡中的表格結構相同，只是內容隨MySQL查詢而變化。查詢結果可能有成千上萬行。

我該怎麼辦？我很新的Javascript和PHP 感謝

Answer 1

什麼，你正在努力實現主要是：

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Tab 1</a></li> 
     <li><a href="#tabs-2">Tab 2</a></li> 
     <li><a href="#tabs-3">Tab 3</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <table> <!-- Rest of the table1 --> </table> 
    </div> 
    <div id="tabs-2"> 
     <table> <!-- Rest of the table2 --> </table> 
    </div> 
    <div id="tabs-3"> 
     <table> <!-- Rest of the table3 --> </table> 
    </div> 
</div> 

你可以使用PHP代碼來創建這些表（我假設你已經查詢數據庫，並有在變量$行中的數據）：

<div id="tabs-1"> 
    <table> 
    <?php foreach ($rows as $data) 
     { 
     echo "<tr>"; 
     echo "<td>". $data['attribute1'] . "</td><td>". $data['attribute2'] . "</td>""; 
     echo "</tr>"; 
     } 
    ?> 
    </table> 
</div> 

好了，上面的代碼不一定完整，可以添加表頭，用CSS等按照您的要求裝飾。但是使用這種方法，您將不得不重複每個表的代碼。既然你說你在三個標籤中都有相同的表格結構，你可以在它自己的循環中創建div標籤。在這種情況下，您將擁有：

for(loop as many tabs you want) { 
    echo "<div id='tabs-'".index.">"; 

    /* Query DB and get the data into $rows variable */ 

    foreach ($rows as $data) { 
      echo "<tr>"; 
      echo "<td>". $data['attribute1'] . "</td><td>". $data['attribute2'] . "</td>""; 
      echo "</tr>"; 
      } 

    echo "</div>"; 
} 

同樣，您需要按照您的要求進行裝飾。這些代碼片段可以幫助您開始！

Answer 2

jQuery UI可以很容易地創建和訪問標籤。它有一個nice API做你描述的事情。