如何在Flask的Jinja2循环中实现表格折叠及HTML属性修改？

首先明确：Jinja2是服务器端模板引擎，页面渲染完成后，模板里的row.visible这类变量就已经转换成静态HTML了，客户端无法直接修改这些服务器端变量。所以你没法通过按钮点击直接更新row.visible来控制显示，但完全可以用JavaScript操作DOM元素的属性（比如hidden、style.display）来实现折叠/展开效果，而且Jinja2循环里完全可以结合JS使用。

方法一：纯前端JS控制DOM显示状态 #

核心思路是给每个嵌套表格行添加唯一标识，让按钮点击时能精准找到对应的行并切换显示状态。可以利用Jinja2循环的索引或数据唯一ID来绑定按钮和目标行：

修改后的代码示例：

{% for idx, row in enumerate(table) %}
<tr>
    <td>
        <!-- 按钮通过data属性绑定对应嵌套行的ID -->
        <button onclick="toggleNestedRow('nested-row-{{ idx }}')">
            折叠/展开
        </button>
    </td>
    <!-- 外层表格其他列内容 -->
</tr>
<!-- 嵌套行添加唯一ID，初始状态用row.visible控制hidden属性 -->
<tr id="nested-row-{{ idx }}" {% if not row.visible %}hidden{% endif %}>
    <td colspan="100%"> <!-- 根据外层表格列数调整colspan值 -->
        <table>
            <!-- 嵌套表格内容，示例循环渲染子数据 -->
            {% for item in row.nested_data %}
            <tr>
                <td>{{ item.col1 }}</td>
                <td>{{ item.col2 }}</td>
            </tr>
            {% endfor %}
        </table>
    </td>
</tr>
{% endfor %}

<script>
function toggleNestedRow(rowId) {
    const targetRow = document.getElementById(rowId);
    // 切换hidden属性实现显示/隐藏
    targetRow.hidden = !targetRow.hidden;
    // 也可以用style.display控制：
    // targetRow.style.display = targetRow.style.display === 'none' ? '' : 'none';
}
</script>

关键说明： #

• 用enumerate(table)获取循环索引idx，给每个嵌套行生成唯一ID，确保按钮能精准定位到对应行
• 初始状态通过Jinja2的row.visible设置hidden属性，保留服务器端渲染的初始状态
• 纯前端JS操作，无需后端交互，性能快且实现简单

方法二：同步服务器端状态（可选） #

如果需要折叠/展开状态在页面刷新后保留，或者要同步到后端数据库，可以通过AJAX请求后端接口更新状态，再局部刷新DOM：

示例代码：

{% for idx, row in enumerate(table) %}
<tr>
    <td>
        <button onclick="toggleServerState('{{ row.id }}', 'nested-row-{{ idx }}')">
            折叠/展开
        </button>
    </td>
</tr>
<tr id="nested-row-{{ idx }}" {% if not row.visible %}hidden{% endif %}>
    <td colspan="100%">
        <table>
            <!-- 嵌套表格内容 -->
        </table>
    </td>
</tr>
{% endfor %}

<script>
function toggleServerState(rowId, elementId) {
    const targetRow = document.getElementById(elementId);
    // 发送POST请求到后端接口
    fetch(`/toggle-row-visible/${rowId}`, { method: 'POST' })
        .then(res => res.json())
        .then(data => {
            // 根据后端返回的新状态更新DOM
            targetRow.hidden = !data.visible;
        });
}
</script>

后端需实现/toggle-row-visible/<row_id>接口，更新对应数据的visible状态并返回最新状态。

内容的提问来源于stack exchange，提问作者strK