doupishan3309 2013-06-15 17: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 17: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条)

报告相同问题？

悬赏问题

  • ¥15 求螺旋焊缝的图像处理
  • ¥15 blast算法（相关搜索：数据库）
  • ¥15 请问有人会紧聚焦相关的matlab知识嘛？
  • ¥15 网络通信安全解决方案
  • ¥50 yalmip+Gurobi
  • ¥20 win10修改放大文本以及缩放与布局后蓝屏无法正常进入桌面
  • ¥15 itunes恢复数据最后一步发生错误
  • ¥15 关于#windows#的问题：2024年5月15日的win11更新后资源管理器没有地址栏了顶部的地址栏和文件搜索都消失了
  • ¥100 H5网页如何调用微信扫一扫功能？
  • ¥15 讲解电路图，付费求解