Jinja 表，当列 == 值时，然后将 div 添加到特定列

Question

I have a flask app with a jinja table, one of the columns has the value = 1 when that row meets a criteria.

For every row that a 1 is present in that column i would like to replace it with a circle, for example:

How would I add it to my jinja table?

<table>
        <thead>

          <tr>
            {% for col in column_names %}
            <th>
            
              {{col}}
             
            </th>
            {% endfor %}
          </tr>

        </thead>
        <tbody>
          {% for row in row_data %}
          <tr>
            {% for col, row_ in zip(column_names, row) %}

  {% if loop.index == 1 %} 
            <td> 

IF  {{ row[16] }} == 1 then <div class="circle" style="float: left;">LB</div> 
else ''
end 

 {{row_}}</td>
{% else %}
            <td>{{row_}}</td>

 {% endif %}

            {% endfor %}
          </tr>
          {% endfor %}

         
        </tbody>
  
      </table>

HTML/CSS code of div i want to appear in that cell

.circle
    {
    width:20px;
    height:20px;
    border-radius:10px;
    font-size:8px;
    color:#fff;
    line-height:20px;
    text-align:center;
    background:#000
    }

<div class="circle" style="float: left;">LB</div> 

Answer 1

Solution

Try the following.

The one-line if-else statement in jinja2 looks like this:

 {{ OUTPUT_WHEN_TRUE if condition else OUTPUT_WHEN_FLASE }}

So, in your case, the code within for each <td></td> (where loop.index == 1 over the inner loop) will look like this:

 {{ '<div class="circle" style="float: left;">LB</div>' if row[16] == 1 else '' }} {{ row_ }}

Code

<table>
    <thead>

        <tr>
        {% for col in column_names %}
        <th>
        
            {{col}}
            
        </th>
        {% endfor %}
        </tr>

    </thead>
    <tbody>
        {% for row in row_data %}
        {% set row_loop = loop %}
        <tr>
        {% for col, row_ in zip(column_names, row) %}
        {% set col_loop = loop %}

        {# Choose which loop: row or col you are referring to #} 
        {% if col_loop.index == 1 %} 
        <td> 

            {{ '<div class="circle" style="float: left;">LB</div>' if row[16] == 1 else '' }} {{ row_ }}

        </td>
        {% else %}
            
            <td>{{ row_ }}</td>

        {% endif %}

        {% endfor %}
        </tr>
        {% endfor %}
     
    </tbody>
  
</table>

References

• Get loop index of outer loop
• Jinja Docs - Accessing the parent Loop
• Jinja shorthand conditional: one-line if-else