Flask+Jinja2：如何将表格中的布尔值替换为图标

下面分四种技术栈给出具体实现方式，你可以根据开发习惯选择：

1. Python后端预处理（最直接） #

在把DataFrame传给模板前，直接替换目标列的True/False为带样式的HTML片段，前端渲染时自动解析：

import pandas as pd
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 示例DataFrame
    df = pd.DataFrame({
        'Name': ['Item1', 'Item2', 'Item3'],
        'Collecting': [True, False, True],
        'Archiving': [False, True, False]
    })

    # 定义状态转HTML的函数
    def status_to_html(status):
        if status:
            return '<span class="status-dot green"></span><span class="hidden">True</span>'
        else:
            return '<span class="status-dot red"></span><span class="hidden">False</span>'

    # 处理目标列
    target_cols = ['Collecting', 'Archiving']
    for col in target_cols:
        df[col] = df[col].apply(status_to_html)

    # 转成HTML表格，关闭HTML转义
    table_html = df.to_html(escape=False, classes='data-table')
    return render_template('index.html', table=table_html)

模板中直接渲染：

<!-- templates/index.html -->
<style>
.status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 4px;
}
.status-dot.green { background-color: #2ecc71; }
.status-dot.red { background-color: #e74c3c; }
.hidden { display: none; }
.data-table { border-collapse: collapse; width: 100%; }
.data-table th, .data-table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
</style>

<div>{{ table|safe }}</div>

2. Jinja2模板内处理 #

如果不想修改后端数据，可在模板遍历表格行时判断单元格值：

后端传递原始数据：

@app.route('/')
def index():
    df = pd.DataFrame({
        'Name': ['Item1', 'Item2', 'Item3'],
        'Collecting': [True, False, True],
        'Archiving': [False, True, False]
    })
    # 转成字典列表传给模板
    data = df.to_dict('records')
    columns = df.columns.tolist()
    return render_template('index.html', data=data, columns=columns)

模板中渲染表格：

<!-- templates/index.html -->
<style>
.status-check { color: #2ecc71; font-size: 16px; }
.status-cross { color: #e74c3c; font-size: 16px; }
.data-table { border-collapse: collapse; width: 100%; }
.data-table th, .data-table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
</style>

<table class="data-table">
    <thead>
        <tr>
            {% for col in columns %}
            <th>{{ col }}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for row in data %}
        <tr>
            {% for col in columns %}
            <td>
                {% if col in ['Collecting', 'Archiving'] %}
                    {% if row[col] %}
                        <span class="status-check">✓</span>
                    {% else %}
                        <span class="status-cross">✗</span>
                    {% endif %}
                {% else %}
                    {{ row[col] }}
                {% endif %}
            </td>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>

3. 前端JavaScript动态替换 #

适合后端已生成纯文本表格，不想修改后端逻辑的场景：

<!-- templates/index.html -->
<style>
.status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.status-dot.green { background-color: #2ecc71; }
.status-dot.red { background-color: #e74c3c; }
.data-table { border-collapse: collapse; width: 100%; }
.data-table th, .data-table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
</style>

<table class="data-table" id="status-table">
    <!-- 后端生成的纯文本表格，比如df.to_html()的结果 -->
</table>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const table = document.getElementById('status-table');
    const targetCols = ['Collecting', 'Archiving'];
    let colIndices = [];

    // 获取目标列的索引
    const headerRow = table.querySelector('thead tr');
    Array.from(headerRow.children).forEach((th, index) => {
        if (targetCols.includes(th.textContent.trim())) {
            colIndices.push(index);
        }
    });

    // 遍历替换单元格内容
    const bodyRows = table.querySelectorAll('tbody tr');
    bodyRows.forEach(row => {
        colIndices.forEach(index => {
            const cell = row.children[index];
            const value = cell.textContent.trim();
            if (value === 'True') {
                cell.innerHTML = '<span class="status-dot green"></span>';
            } else if (value === 'False') {
                cell.innerHTML = '<span class="status-dot red"></span>';
            }
        });
    });
});
</script>

4. CSS伪元素实现（无需修改内容） #

如果想保留原始文本但用图标显示，可通过CSS类和伪元素实现：

后端给目标列单元格添加类：

# 给状态列的内容包裹带类名的span
df[['Collecting', 'Archiving']] = df[['Collecting', 'Archiving']].applymap(
    lambda x: f'<span class="status {"active" if x else "inactive"}">{x}</span>'
)
table_html = df.to_html(escape=False, classes='data-table')

对应的CSS：

.status { position: relative; padding-left: 20px; }
.status.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #2ecc71;
}
.status.inactive::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #e74c3c;
}
/* 可选：隐藏原始文本 */
.status { color: transparent; }

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