选项卡式窗格中的表格

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做你描述的事情。