doupishan3309 2013-06-15 09:25
浏览 53
已采纳

如何在Jquery中制作一个用MySQL数据库显示数据的手风琴?

How would I make an accordion in JQuery that shows data from my mysql database using PHP. So I would like it to show the data by alphabetical order like this: enter image description here

... So until the user clicks on the "A" it doesn't show the data and same for b and so on..

So far I have this :

enter image description here

using Which is not in an accordion. Can someone please help me get started on this. It will be really appreciated.

[Code]

<div id="accordion">
<font face="Calibri" style="italic" size='10px' color="white">
  <?php
    mysql_connect("host","user","pass!") or die("Could not connect to localhost");
mysql_select_db("db") or die( "Could not connect to database");
?>
<?php
$result = mysql_query("SELECT * FROM table ORDER BY name ASC");
echo "<div class='scroll'>";
while ($row = mysql_fetch_array($result))
  {
   echo "<div style='margin: 0 auto;'>
                    <span style='display:inline-block; width:200px; text-align:left;'>" . ucwords($row['name']) . "</span>
                    <span style='display:inline-block; text-align:left;'>" . ucwords($row['number']) . "</span>
                </div>
                <br>";
  }
  echo "</div>";
?>
</div>
  • 写回答

4条回答 默认 最新

  • doujiyun8846 2013-06-15 09:52
    关注

    You can do something like this.

    $names = ['alex', 'adam', 'bob', 'bryan'];
    asort($names); // The list wasn't sorted, if you don't want sorting you can just remove this line.
    
    // Prepare list for accordion.
    $accordionData = [];
    foreach($names as $name) {
      $accordionData[substr($name, 0, 1)][] = $name;
    }
    
    // Print accordion, change the echoes to reflect your accordion html.
    foreach($accordionData as $index => $names) {
      echo strtoupper($index).'<br />';
      foreach($names as $name) {
        echo ucfirst($name).'<br />'; // ucfirst changes the first letter to upper case.
      }
    }
    

    output:

    A
    Adam
    Alex
    B
    Bob
    Bryan
    

    If your question included how to make the actual accordion, just try the code available here: http://jqueryui.com/accordion/

    And here is a working example based on jquery ui

    // You should replace this with your DB data.
    $names = ['alex', 'adam', 'bob', 'bryan'];
    
    // The list wasn't sorted, if you don't want sorting you can just remove this line.
    asort($names);
    
    // Prepare list for accordion.
    $accordionData = [];
    foreach($names as $name) {
      $accordionData[substr($name, 0, 1)][] = $name;
    }
    
    ?>
    <!doctype html>
    
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>jQuery UI Accordion - Collapse content</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css" />
      <script>
      $(function() {
        $( "#accordion" ).accordion({
          collapsible: true,
          active: false
        });
      });
      </script>
    </head>
    <body>
    <div id="accordion">
    <?php
    // Print accordion, change the echoes to reflect your accordion html.
    foreach($accordionData as $index => $names) {
    ?>
    
      <h3><?php echo strtoupper($index); ?></h3>
      <div>
      <?php
      foreach($names as $name) {
      ?>
        <p><?php echo ucfirst($name); ?></p>
      <?php
      }
      ?>
      </div>
      <?php
    }
    ?>
    </div>
    

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥50 数据库开发问题求解答
  • ¥15 安装anaconda时报错
  • ¥20 如何用Python处理单元格内连续出现的重复词语?
  • ¥15 小程序有个导出到插件方式,我是在分包下引入的插件,这个export的路径对吗,我看官方文档上写的是相对路径
  • ¥20 希望有人能帮我完成这个设计( *ˊᵕˋ)
  • ¥100 将Intptr传入SetHdevmode()将Intptr传入后转换为DEVMODE的值与外部代码不一致
  • ¥50 基于ERA5数据计算VPD
  • ¥15 寻找杂志《Tornatzky, L. G., & Fleischer, M. (1990). The Processes of Technological Innovation. 》
  • ¥15 前台多人编辑时怎么让每个人保存刷新都互不干扰
  • ¥20 如何用Python删除单元格内连续出现的重复词?
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部