如何插入Javascript按值修改Flask WTF Jinja2表格单元格的CSS类

方案1：服务端直接实现（更推荐，无需JS） #

你使用的Flask-Table库支持自定义列类，通过重写属性方法即可实现单单元格条件样式，不需要前端额外处理：
修改Python代码的列定义部分即可：

# 自定义带条件样式的百分比列类
class PercentCol(Col):
    def get_td_html_attrs(self, item):
        # 获取当前行的PercentFull值转成数字
        percent = int(item.PercentFull)
        attrs = super().get_td_html_attrs(item)
        # 数值小于25时追加红色背景类
        if percent < 25:
            attrs['class'] = attrs.get('class', '') + ' bg-danger'
        return attrs

# 修改damTable的列定义，将原Col替换为自定义的PercentCol，删除原来固定的td_html_attrs配置
class damTable(Table):
    classes = ['table', 'table-bordered', 'table-striped']
    Dam = Col('Dam')
    PercentFull = PercentCol(name='PercentFull',attr='PercentFull')

修改完成后服务端渲染时就会自动给数值小于25的单元格添加bg-danger类，无需额外修改模板。

方案2：前端JS实现 #

如果你希望通过JS处理样式，按下面两步修改即可：

1. 先给PercentFull列添加统一的标识类，方便JS选中目标单元格：

# 修改damTable中的PercentFull定义，增加标识类
PercentFull = Col(name='PercentFull',attr='PercentFull', td_html_attrs={'class':'percent-cell'})

2. 在模板damlevels.html的page_content块末尾插入JS代码：

{% block page_content %}
<!-- 原有模板内容保持不变 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 选中所有百分比单元格
    const percentCells = document.querySelectorAll('.percent-cell');
    percentCells.forEach(cell => {
        // 提取单元格值转成整数
        const value = parseInt(cell.innerText.trim());
        if (value < 25) {
            cell.classList.add('bg-danger');
        }
    });
});
</script>
{% endblock %}

两种方案均可以实现需求，方案1逻辑更集中，不需要前后端分开维护，更推荐使用。

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