如何在Flask与Jinja中根据Remarks列值高亮表格行？

完全可以在Flask端完成行高亮的逻辑处理，生成带样式的HTML表格后再传给Jinja渲染，这样前端不需要额外写逻辑。下面是两种可行的实现方式：

方法1：直接内嵌行背景样式（快速实现） #

在Flask中利用Pandas的style.apply方法，根据Remarks列的值给每一行添加背景色样式，然后生成带样式的HTML字符串传递给前端。

Flask视图函数代码 #

from flask import Flask, render_template
import pandas as pd

app = Flask(__name__)

@app.route('/')
def show_table():
    # 构造你的DataFrame（实际项目中替换为你的数据来源）
    df = pd.DataFrame({
        'Name': ['Joseph', 'Tom'],
        'Marks': [40, 60],
        'Remarks': ['Warning', 'Satisfied']
    })

    # 定义行高亮逻辑函数
    def highlight_row_based_on_remarks(row):
        # 判断Remarks值，返回对应样式
        if row['Remarks'] == 'Warning':
            # 给整行每个单元格设置红色背景
            return ['background-color: #ff6b6b'] * len(row)
        else:
            # 其余情况设置绿色背景
            return ['background-color: #51cf66'] * len(row)

    # 应用样式并转换为HTML表格
    styled_table_html = df.style.apply(highlight_row_based_on_remarks, axis=1) \
                      .to_html(classes='data', justify='center', header=True, index=False)
    
    # 保持和你原有代码一致的列表结构，适配前端循环
    table_data = [styled_table_html]

    return render_template('your_template.html', df=table_data)

Jinja模板代码（无需修改） #

{% for grouped_table in df %}
     {{ grouped_table|safe }}
{% endfor %}

方法2：使用CSS类分离样式（更易维护） #

如果需要后续方便修改样式，可以定义CSS类，在Flask中给行添加对应的类名，前端通过CSS控制样式。

Flask视图函数代码 #

from flask import Flask, render_template
import pandas as pd

app = Flask(__name__)

@app.route('/')
def show_table():
    df = pd.DataFrame({
        'Name': ['Joseph', 'Tom'],
        'Marks': [40, 60],
        'Remarks': ['Warning', 'Satisfied']
    })

    def assign_row_class(row):
        if row['Remarks'] == 'Warning':
            return ['class="warning-row"'] * len(row)
        else:
            return ['class="success-row"'] * len(row)

    styled_table_html = df.style.apply(assign_row_class, axis=1) \
                      .to_html(classes='data', justify='center', header=True, index=False)
    table_data = [styled_table_html]

    return render_template('your_template.html', df=table_data)

Jinja模板添加CSS样式 #

在模板的<head>中添加以下CSS：

<style>
.data {
    border-collapse: collapse;
    width: 80%;
    margin: 20px auto;
}
.data th, .data td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}
.warning-row {
    background-color: #ff6b6b;
}
.success-row {
    background-color: #51cf66;
}
</style>

模板中的表格渲染代码和方法1一致，无需修改。

关键说明 #

• axis=1参数告诉Pandas按行应用样式函数，而不是按列。
• to_html方法保留了你原来设置的classes、justify等参数，确保表格结构和原有样式一致。
• 使用|safe过滤器是为了让Jinja直接渲染HTML内容，而不是转义成纯文本。

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