使用 Jinja 模板根据单元格值对表格中的单元格进行颜色编码答案

【问题标题】：Color coding cells in a table based on the cell value using Jinja templates使用 Jinja 模板根据单元格值对表格中的单元格进行颜色编码
【发布时间】：2014-01-20 17:04:00
【问题描述】：

我有一个简单的烧瓶应用程序，需要显示一个值表，其中单元格背景根据阈值根据单元格值进行颜色编码。我正在生成表格内容如下：

  {% block dashboard_table2 %}
      <table>
      {% for row in data %}
          {% for item in row %}
              <td>{{ item }}</td>
          {% endfor %}
      </tr>
      {% endfor %}
      </table>
  {% endblock %}

我尝试在 Python 中像这样将值包装在样式标签中，但没有成功：

  if int(value) <= 10:
      value = '<p style="background-color:Red">' + value + '</p>'

我猜页面的 CSS 覆盖了样式属性。我也尝试只设置文本颜色属性而不是背景颜色但没有骰子。关于这样做的好方法有什么建议吗？我想要一种简洁的方法来指定模板中没有硬编码的阈值。

【问题讨论】：

不要“猜测”。这些样式标签是否完全在 HTML 中输出（使用查看源代码）？如果不是，那么您调用它的方式有问题 - value 与任何事物有什么关系？
修复了示例中的一个错误。 value 是要出现在表格单元格中的文本。样式没有进入 HTML，现在是，但它只是作为单元格文本内容的一部分出现。

标签： python css flask jinja2

【解决方案1】：

最简单的方法是将此显示逻辑放入您的模板中：

<table>
    {% for row in data %}
    <tr>
        {% for item in row %}
            {% if item <= 10 %}
                <td class="under-limit">{{ item }}</td>
            {% else %}
                <td>{{ item }}</td>
            {% endif %}
        {% endfor %}
    </tr>
    {% endfor %}
</table>

然后，您可以在 CSS 中使用：

.under-limit { background-color: red; }

【讨论】：

【解决方案2】：

<table>
   {% for row in row %}
       {% if item <= 10 %}
       <tr style ="background-color: red">
           <td> {{ item }} </td>
       </tr>
       {% else %}
       <tr>
           <td> {{ item }} </td>
       </tr>
       {% endif %}
    {% endfor %}
</table>

这对我有用。

【讨论】：