如何使用<details>和<summary>显示数据库记录

Question

我正在尝试使用HTML5 <details>和<summary>功能来显示我的数据库中的记录。例如：

CATEGORY | TITLE
Fruit    | Apple
Cars     | Chevrolet
Actors   | Tom Hanks
....

我想显示如下数据：

汽车

• 雪佛兰
• 福特
• 沃克斯霍尔

演员

• 汤姆汉克斯
• 哈里森福特
• 梅丽尔斯特里普
• Selina Gomez

如何构建HTML中的查询和显示？我试过这个问题：

SELECT DISTINCT CATEGORY, TITLE 
FROM   TEST 
GROUP BY CATEGORY

但是，我从作品中得到的就是这样：

演员

• 汤姆汉克斯

演员

• 哈里森福特

我还需要其他查询吗？

Answer 1

我们使用cfquery，cfoutput容器来实现这一目标。

cfoutput

上的群组参数

这就是它的工作原理：

<cfquery name='dataPuller' datasource='whateverYourDataSourceIs'>
  SELECT DISTINCT CATEGORY, TITLE 
    FROM TEST 
   GROUP BY CATEGORY
   ORDER BY CATEGORY
</cfquery>

<cfoutput query='dataPuller' group='category'>
<strong>#dataPuller.CATEGORY#</strong>
<br>
<li>
  <cfoutput>
    <ul>#dataPuller.TITLE#</ul>
  </cfoutput>
</li>
</cfoutput>

• 请注意group参数
• 请注意嵌套的cfoutput

希望这会有所帮助：）