更改单元格颜色条件格式Django HTML

Question

我的HTML视图中有一个表，当某个值在单元格内时，我希望单元格背景发生更改。这是我的表格的HTML屏幕截图。这些值在Django视图中使用一个简单的for循环填充。附加您将看到css和HTML。在桌子的顶端，你会看到传说。例如，如果在任何td tag == 6中的值，使单元格背景rgb(1, 109, 167)。这就是我想要达到的目标。谢谢

<div class="table-responsive">
    <table class="table" id="scores">
        <thead>
            <tr>
                <td rowspan="3"></td>
                <th colspan="3" scope="colgroup">Reasoning</th>
                <th colspan="3" scope="colgroup">Executive Functions</th>
                <th colspan="2" scope="colgroup">Speed</th>
                <th colspan="2" scope="colgroup">Memory</th>
            </tr>
            <tr>
                <th scope="col">Verbal</th>
                <th scope="col">Spatial</th>
                <th scope="col">Abstract</th>
                <th scope="col">Flexible</th>
                <th scope="col">Working Memory</th>
                <th scope="col">Attention</th>
                <th scope="col">Processing</th>
                <th scope="col">Visual Motor</th>
                <th scope="col">Verbal</th>
                <th scope="col">Visual </th>
            </tr>
        </thead>
        {% for i in scores %}
            <tbody>
                <tr>
                    <td>{{i.test_date}}</td>
                    <td>{{i.reasoning_verbal }}</td>
                    <td>{{i.reasoning_spatial}}</td>
                    <td>{{i.reasoning_abstract}}</td>
                    <td>{{i.executive_flexibility}}</td>
                    <td>{{i.executive_working_memory}}</td>
                    <td>{{i.executive_attention}}</td>
                    <td>{{i.speed_processing}}</td>
                    <td>{{i.speed_visual_motor}}</td>
                    <td>{{i.memory_verbal}}</td>
                    <td>{{i.memory_visual}}</td>
                </tr>
            </tbody>
        {% endfor %}
    </table>
</div>

#d6
{
    background-color: rgb(1, 109, 167);
    color: black;
}
#d5
{
    background-color: rgb(1, 167, 164);
    color: black;
}
#d4
{
    background-color: rgb(154, 191, 80);
    color: black;
}
#d3
{
    background-color: rgb(228, 190, 36);
    color: black;
}
#d2
{
    background-color: rgb(214, 142, 33);
    color: black;
}
#d1
{
    background-color: rgb(187, 185, 182);
    color: black;
}

​

​

Answer 1

看起来您使用的是引导程序，下面是一个引导类的示例。不过，您也可以轻松地编写自己的自定义类。

Django的模板语言可以在html标记中工作，如下所示：

<td class="{% if i.your_var == 6 %}table-warning{% endif %}">{{i.your_var}}</td>

如果变量为6，则单元格将为橙色(用于警告)。如果需要处理许多不同的场景或变量类型和范围，请考虑编写自定义筛选器标记：

{% load my_color_filter %}

<td class="{{i.your_var|my_color_filter}}">{{i.your_var}}</td>

my_color_filter.py

from django import template
register = template.Library()

@register.filter()
def my_color_filter(my_var):
    if my_var == 6:
        td_class = 'someClass'
    elif my_var > 6:
        td_class = 'someOtherClass'
    # and so on...

    return td_class

您可以了解有关自定义筛选标记在Django文档中的更多信息。