使用Jinja模板根据单元格值对表格中的颜色进行编码 [英] Color coding cells in a table based on the cell value using Jinja templates

问题描述

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

pre $ {$ block dashboard_table2％}
< table>
{％用于行数据％}
{％用于行％中的项目}
< td> {{item}}< / td>
{％endfor％}
< / tr>
{％endfor％}
< / table>
{％endblock％}

我尝试在Python中像这样包装值但它不起作用：

  if int（value）<= 10：
 value ='< p style =background-color：Red>'+ value +'< / p>'
  

<我猜这个页面的CSS正在覆盖style属性。我也尝试设置文本颜色属性，而不是背景颜色，但没有骰子。任何建议在一个很好的方式来做到这一点？我想要一个简洁的方式来指定在模板中没有硬编码的阈值。

 < table>这是最简单的方法， 
 {％为行中的数据％} 
< tr> 
 {％对于行中的项目％} 
 {％如果项目<= 10％} 
  {％else％} 
< td> {{item}}< / td> 
 {％endif％} 
 {％endfor％} 
< / tr> 
 {％endfor％} 
< / table> 
  

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

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

I have a simple flask app and need to display a table of values, with the cell backgrounds colour coded based on the cell value according to thresholds. I'm generating the table content as follows:

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

I tried wrapping the values in style tags like this in Python but it didn't work:

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

I'm guessing the CSS for the page is overriding the style attribute. I also tried just setting the text color attribute instead of background-color but no dice. Any suggestions on a good way to do this? I'd like to have a concise way to specify threshold values that aren't hard-coded in the templates.

解决方案

The easiest way would be to put this display logic in your template:

<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>

Then, in your CSS you can use:

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

这篇关于使用Jinja模板根据单元格值对表格中的颜色进行编码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！