考虑下表，该表sqlite使用flask和迭代数据库中的数据sqlalchemy。
对于此示例，假设数据是发票清单，则在每一行上单击都会打开collapsible bootstrap 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 Twitter Bootstrap在表单元格上使用crash.js [几乎完成]，以及在此处http://jsfiddle.net/whytheday/2Dj7Y/11/，但是内容还是静态的，而不是动态的。
解决方案是拥有一个与目标ID相匹配的“动态”数据目标标签，但我不知道该怎么做。
要完成此任务，您必须将tr标记插入jinja循环，然后将动态数据目标添加到tr标记，并将动态id添加到所有collapsible bootstrap accordions; 因此，每个tr标签将指向相应的手风琴。代码如下所示：
<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。因此，tr标记的每个属性数据目标（也是动态生成的）都指向相应的手风琴。
以防万一：
您会注意到我将类添加no-border到了第二个tr块中。这是在您不希望Bootstrap表有边框的情况下...这是相应的CSS：
<style type="text/css">
.table>tbody>tr.no-border>td{
border-top: none;
}
</style>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句