选项卡式窗格中的表格

发布于 2024-10-19 14:58:09 字数 704 浏览 1 评论 0原文

我有这样的东西。

<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 很陌生谢谢

原文

I have something like this.

<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>

Instead of the content (Tab 1 content...) in each of the tabs, I need Tables. The structure of the tables in all the 3 tabs is the same, just the content changes with the MySQL query. The query results may have thousands of rows.

How can I go about it? I am very new to Javascript and PHP
Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

温折酒 2024-10-26 14:58:09

您想要实现的基本上是：

<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>";
}

同样，您需要根据您的要求进行装饰。这些代码片段应该可以帮助您入门！

What you are trying to achieve is basically:

<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>

you can use the PHP code to create these tables (I assume you have queried the DB and have the data in variable $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>

Well, the above code is not complete though, you can add table header, decorate it with CSS etc as per your requirement. But using this method, you will have to repeat the code for each table. Since you said you have the same table structure in all the three tabs, you can create the div tags in a loop it self. In that case you will have:

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>";
}

Again, you need to decorate as per your requirements. These code snippets should help you get started!

回复收藏 0 原文