如何在Flask中渲染数量可变的DataFrame列表为HTML表格？

云上老周

2026-7-21

Flask渲染动态数量的DataFrame表格

后端处理：将DataFrame列表转为HTML字符串列表

把需要展示的所有DataFrame放进一个列表，循环遍历每个DataFrame，转换成带唯一ID的HTML字符串，最后将这个字符串列表传给模板：

# 假设df_list是你要展示的DataFrame列表
table_html_list = []
for idx, df in enumerate(df_list):
    # 为每个表格生成唯一ID，避免DOM元素冲突
    table_html = df.to_html(
        index=False,
        table_id=f'table_{idx}',
        float_format="{:,.2f}".format
    )
    table_html_list.append(table_html)

# 把表格列表传给前端模板
return render_template(
    "test.html",
    title='Title',
    form=form,
    tables=table_html_list
)

前端模板：动态渲染表格和Tab导航

用Jinja2的循环语法，遍历后端传来的表格字符串列表，自动生成Tab导航和对应的表格面板：

Tab导航部分

<ul class="nav nav-tabs" id="tableTabs" role="tablist">
    {% for idx, _ in enumerate(tables) %}
    <li class="nav-item" role="presentation">
        <button class="nav-link {% if idx == 0 %}active{% endif %}" 
                id="table_{{idx}}-tab" 
                data-bs-toggle="tab" 
                data-bs-target="#table_{{idx}}" 
                type="button" 
                role="tab" 
                aria-controls="table_{{idx}}" 
                aria-selected="{% if idx == 0 %}true{% else %}false{% endif %}">
            表格{{ idx + 1 }}
        </button>
    </li>
    {% endfor %}
</ul>

Tab内容部分

<div class="tab-content" id="tableTabsContent">
    {% for idx, table in enumerate(tables) %}
    <div class="tab-pane fade {% if idx == 0 %}show active{% endif %}" 
         id="table_{{idx}}" 
         role="tabpanel" 
         aria-labelledby="table_{{idx}}-tab">
        {{ table|safe }}
    </div>
    {% endfor %}
</div>