Python Flask 可折叠/可扩展动态表答案

【问题标题】：Python Flask collapsible/expandable dynamic tablePython Flask 可折叠/可扩展动态表
【发布时间】：2018-06-15 17:49:48
【问题描述】：

我正在烧瓶中构建一个表格，其中包含可折叠的行。一行可能在其下方有几个元素，这些元素将在单击时全部折叠。如果我只是硬编码值，它可以正常工作，但是当我使用来自 python 字典的数据的循环填充表时，它不起作用。第一行的第一个孩子折叠而不是所有正确行的孩子折叠。下面应该有足够的代码来重现该问题。 elements 是一个字典，其中键是字符串，值是元组列表。

<table>
<thead>
<tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <th>E</th>
</tr>
</thead>
{%for k, v in elements.items()%}

<tbody>
<tbody class="labels">
<tr>
    <td colspan="5">
        <label for="i">{{k}}</label>
        <input type="checkbox" name="i" id="i" data-toggle="toggle">
    </td>
</tr>
</tbody>

{%for desc in v%}
<tbody class="hide">
<tr>

    <td>{{desc[0]}}</td>
    <td>{{desc[1]}}</td>
    <td>{{desc[2]}}</td>
    <td>
        <button>trigger</button>
    </td>
    <td>{{desc[3]}}</td>
</tr>
</tbody>
{% endfor %}

</tbody>
{% endfor %}

<script>
    $(document).ready(function() {
    $('[data-toggle="toggle"]').change(function(){
        $(this).parents().next('.hide').toggle();
    });
    });

</script>

【问题讨论】：

标签： python jquery html flask

【解决方案1】：

<label for="i">{{k}}</label>
<input type="checkbox" name="i" id="i" data-toggle="toggle">

不小心没有更改 for、name、id 字段。

也需要将它们更新为变量，所以看起来像

<label for={{k}}>{{k}}</label>
<input type="checkbox" name={{k}} id={{k}} data-toggle="toggle">

【讨论】：