Flask应用中Jinja表格指定列值为1时插入圆形标识如何实现

首先你需要先把圆形标识的CSS样式引入到你的页面中，可以直接写在页面<head>标签内的<style>标签里，也可以放到单独的CSS文件后引入：

.circle {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  font-size: 8px;
  color: #fff;
  line-height: 20px;
  text-align: center;
  background: #000;
  float: left;
  /* 可选：加个右边距避免标识和单元格文字贴在一起 */
  margin-right: 6px;
}

接下来修改你的Jinja模板代码，把你写的伪逻辑替换成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 %}
          <div class="circle">LB</div> 
          {% endif %}
          {{row_}}
        </td>
        {% else %}
        <td>{{row_}}</td>
        {% endif %}
      {% endfor %}
    </tr>
    {% endfor %}
  </tbody>
</table>

调整说明：

• 用Jinja标准的{% if row[16] == 1 %}语法替换了你原来的伪代码逻辑，只有当前行第17个字段（索引从0开始计数）值为1时，才会渲染圆形标识
• 把原来写在div上的float内联样式挪到了circle类定义中，代码更整洁
• 如果你需要将该单元格的原有内容完全替换为圆形标识，不需要保留原来的{{row_}}输出，直接删除这行代码即可。

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