时间戳

首页 > 解决方案 > Python Flask 可折叠/可扩展动态表

python - Python Flask 可折叠/可扩展动态表

问题描述

我正在用可折叠的行在烧瓶中构建一个表格。一行可能在其下方有几个元素，这些元素将在单击时全部折叠。如果我只是硬编码值，它可以正常工作，但是当我使用来自 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>

标签： pythonjqueryhtmlflask

解决方案

<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">

推荐阅读