gpt4 book ai didi

php - 如何在 Jquery 中制作一个 Accordion ,用 PHP 显示 MySQL 数据库中的数据?

转载 作者:行者123 更新时间:2023-11-29 08:29:13 25 4
gpt4 key购买 nike

我如何在 JQuery 中制作一个 Accordion ,使用 PHP 显示来 self 的 mysql 数据库的数据。所以我希望它按字母顺序显示数据,如下所示:enter image description here

...因此,在用户单击“A”之前,它不会显示数据,b 等也是如此。

到目前为止我有这个:

enter image description here

使用 这不在 Accordion 中。有人可以帮我开始做这件事吗?我们将不胜感激。

[代码]

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

最佳答案

你可以做这样的事情。

$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.
}
}

输出:

A
Adam
Alex
B
Bob
Bryan

如果您的问题包括如何制作实际的 Accordion ,只需尝试此处提供的代码: http://jqueryui.com/accordion/

这是一个基于 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>

关于php - 如何在 Jquery 中制作一个 Accordion ,用 PHP 显示 MySQL 数据库中的数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17126117/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com