Django中实现表格表头动态变色 解决超过3条数据后CSS样式失效问题

解决方案 #

你可以通过Django模板的模运算过滤器实现样式类的循环复用，原有CSS样式无需修改，仅调整模板中class属性的渲染逻辑即可，修改后代码如下：

<style>.demo1{
    background-color: #F4CCCC;
  }
  .demo2{
    background-color: #D0E0E3;
  }
  .demo3{
    background-color: #EAD1DC;
  } </style>


{% for i in trades %}
    <th  class="demo{{ forloop.counter0|modulo:3|add:1 }}">Capicity</th>
    <th  class="demo{{ forloop.counter0|modulo:3|add:1 }}">Total</th>
    <th  class="demo{{ forloop.counter0|modulo:3|add:1 }}">Training completed</th>
{% endfor %}

实现逻辑 #

• forloop.counter0是Django模板内置的循环变量，从0开始统计当前循环的次数
• 对3取模后会得到0、1、2的无限循环结果，加1后就对应1、2、3的循环序列，刚好匹配预先定义的三个样式类
• 无论后续数据库新增多少条数据，表头都会按三种颜色循环切换，不会出现样式失效的问题

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