Change Cell Color Conditional Formatting Django HTML

Question

I have a table in my HTML view that I want the cell background to change when a certain value is within the cell. Here is a screenshot of my table in HTML. The values are populated with a simple for loop within my Django views. Attached you will see the css and HTML. On the top of the table, you will see the legend. For example if the value in any td tag == 6 , make cell background rgb(1, 109, 167). That's what I'm trying to accomplish. Thanks

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

Milo Persic · Accepted Answer · 2022-03-03 13:52:44Z

3

It looks like you're using bootstrap, so here's an example with a bootstrap class. You could just as easily write your own custom class though.

Django's template language can work inside your html tags, like so:

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

If the variable is 6, the cell will be orange (for warning). If you have a lot of different scenarios or variable types and ranges to handle, consider writing a custom filter tag:

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

You can learn more about custom filter tags here in the Django Docs.

edited Mar 3, 2022 at 13:52

answered Mar 2, 2022 at 14:42

Milo Persic

1,1581 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ray Zuchowski Over a year ago

All the other numbers tho in that legend are assigned a certain color as well, so id imagine for every td im going to have to have an if statement on them?

Ray Zuchowski Over a year ago

Also every number is basically assigned a color so if that cell has a 2 then color has to be orange. What is the most effective way to write this?

Milo Persic Over a year ago

You may find a custom filter tag to be very useful. Custom filter and inclusion tags are incredibly powerful. I've updated my answer with an example.

Ray Zuchowski Over a year ago

This worked awesome. Thank you so much for your help. Now I want to explore what else I can do with them. Thank you so much for the help. Works great!

Milo Persic Over a year ago

You're welcome! So happy to hear that! When I learned how to write custom filter tags and inclusion tags, my mind was blown at just how powerful the framework is, and the rest is history. I use them all the time. Have fun!

Collectives™ on Stack Overflow

Change Cell Color Conditional Formatting Django HTML

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related