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代码创建这些表（我假设您已查询数据库并将数据包含在变量$ rows中）：

<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来处理你描述的事情。

选项卡式窗格中的表格

2 个答案: