python-3.x - 创建 Bootstrap 可折叠 Accordion 表行，显示来自 flask sqlalchemy 占位符的动态内容

Question

考虑下表，它使用 flask 和 sqlalchemy 从 sqlite 数据库中迭代数据。

假设此示例的数据是发票列表，点击每一行会打开一个可折叠的引导 Accordion ，其中包含有关所点击发票的更多信息。

<table class="table table-hover" data-toggle="table">  
<thead>
    <tr>
        <th>Date</th>
        <th>Invoice</th>         
    </tr>
</thead>

<tbody>
<tr data-toggle="collapse" data-target="#accordion" class="clickable">
{% for inv in invoices %}
   <td>
      {{ inv.number }}
   </td>
</tr>
<tr>
   <td>
      <div id="accordion" class="collapse">
         {{ inv.data }}
      </div>
   </td>
</tr>
{% endfor %}
</body>
</table>

这里的问题是只有第一行是可点击的，点击它会打开所有行而不是仅仅打开一行，而我们希望能够点击每一行并专门显示该特定行的数据。

我认为问题出在 data-target="#accordion"标签上，该标签的目标是折叠数据占位符的迭代而不是特定占位符本身。

你可以在这里看到一个例子Twitter Bootstrap Use collapse.js on table cells [Almost Done]在这里 http://jsfiddle.net/whytheday/2Dj7Y/11/但同样内容是静态的而不是动态的。

解决方案是拥有一个与目标 ID 相匹配的“动态”数据目标标签，但我不知道该怎么做。

Answer 1

要完成此任务，您必须将您的 tr 标签插入 jinja 循环，然后将动态数据目标添加 到您的 tr 标签和 动态 id 给你所有的 collapsible bootstrap accordions；所以每个 tr 标签都会指向相应的 Accordion 。代码应如下所示:

<tbody>
    {% for inv in invoices %}
        <tr data-toggle="collapse" data-target="#{{inv.number}}"  class="clickable">
            <td>
                {{ inv.number }}
            </td>
        </tr>
        <tr id="{{inv.number}}" class="no-border collapse">
            <td>
                <div>
                    {{ inv.data }}
                </div>
            </td>
        </tr>
    {% endfor %}
</tbody>

这里的想法是，由于发票编号是唯一的，您将拥有具有唯一 ID 的 Accordion 。因此，您的 tr 标签(它们也是动态生成的)的每个属性 data-target 都将指向相应的 Accordion 。

以防万一:

您会注意到我将 no-border 类添加到第二个 tr block 。这是针对您不希望 Bootstrap 表有边框的情况...这是相应的 css:

<style type="text/css">
    .table>tbody>tr.no-border>td{
        border-top: none;
    }
</style>