javascript - Jinja 表，当列 == 值时，将 div 添加到特定列

Question

我有一个带有 jinja 表的烧瓶应用程序，当该行符合条件时，其中一列的值 = 1。

对于该列中存在 1 的每一行，我想用一个圆圈替换它，例如：

我如何将它添加到我的 jinja 表中？

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

我想出现在该单元格中的 div 的 HTML/CSS 代码

.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

解决方案

试试下面的。

中的单行if-else语句jinja2如下所示：

{{ OUTPUT_WHEN_TRUE if condition else OUTPUT_WHEN_FLASE }}

因此，在您的情况下， for each 中的代码<td></td>（在loop.index == 1内部循环中的位置）将如下所示：

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

代码

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

参考

• 获取外循环的循环索引
• Jinja Docs -访问父循环
• Jinja 条件简写：单行if-else