单击时动态显示数据库信息

Dynamically display database information onclick

本文关键字：信息 数据库 动态显示 单击      更新时间：2023-09-26

我使用LAMP设置了一个供个人使用的Web服务。基本上，我有一个可滚动的列表，其中包含我在PHP脚本中提取一次的一些数据库信息。我希望能够单击其中一个项目，并在预览窗格中显示更多信息。（预览窗格已设置）

我不希望我的数据库中有超过 100 个条目。另外，我提取的数据非常小...大约 10 个字段，全部为文本数据。

我的问题如下：如果我一次性提取我需要的所有数据，我如何存储它，以便我定义的每个数据块（预览窗格中需要 2-3 行）都被"缓存"，我可以随意访问该给定块，以便我可以在单击其相应的列表条目时显示它？基本上，这与在 Web 浏览器中单击电子邮件并将邮件的其余部分显示在预览窗格中大致相同。

谢谢。

注意：我使用预览窗格或列表的事实无关紧要。只是描述我在做什么。

如果我理解正确，您想创建一个简单的页面，其中隐藏了几个细节，直到您单击不同的按钮。如果要以"缓存"方式执行此操作，可以尝试以下操作：

  1. 获取完整的数据，以便所有内容（包含详细信息）最终都出现在结果 HTML 中。一切：我的意思是，应该始终可见的部分以及只有在按下按钮后才能看到的细节。
  2. 现在，进入设计。您将必须编写CSS代码，这将隐藏详细信息。（当然，为此，您必须在步骤1中创建HTML，例如，这将允许您通过CSS类定位详细信息。您还必须弄清楚如何创建按钮。
  3. 最复杂的部分是将按钮绑定到 Javascript 操作，这些操作将显示隐藏的细节。您可以从Javascript控制所有CSS属性，例如，您可以动态更改<div>的位置，大小，文本颜色等。

如今，大多数人都使用jQuery来完成步骤3中的任务，甚至是建立在jQuery之上的软件库。如果您刚刚开始执行这样的任务，这可能会有很大帮助。在jQuery网站上，你会发现一个很好的起点，叫做jQuery学习中心。

编辑：我

创建了一个非常基本的小提琴，让您测试我概念的JS部分，请在此处查看：http://jsfiddle.net/eL9mj/22/

相关文章：