Change the rows with the same cell value in the same color in HTML table - Django project

I created a table in my html file for my Django project, and the raw data is based on the following list (It's a very long list, so I only list a few lines):

mylist=
[{'StartDate': '2021-10-02', 'ID': 11773, 'Receiver': Mike, 'Days':66 },
{'StartDate': '2021-10-03', 'ID': 15673, 'Receiver': Jane, 'Days':65}, 
... 
{'StartDate': '2021-10-5', 'ID': 34653, 'Receiver': Jack, 'Days':63}]

My Html file:

  <table class="table table-striped" id="dataTable" width="100%" cellspacing="0">
                                    
     <thead>
        <tr>
            <th>StartDate</th>
            <th>ID</th>
            <th>Name</th>
            <th>Days</th>
        
     </thead>
     <body>

{% for element in mylist %}

      <tr>
        <td>{{ element.StartDate}}</td>
        <td>{{ element.ID }}</td>
        <td>{{ element.Receiver }}</td>
        <td>{{ element.Days }}</td>

       </tr>
      {% endfor %}      
       </tbody>
                         
      </table>

I want to make all the rows with the same ID value the same color. Please advise what I should add into the <td>{{ element.ID }}</td>. Thank you!

parts of my views.py:

client = gspread.service_account_from_dict(creds)


def CreateSheet(Return_record):
    sheet = client.open(Return_record).sheet1
    return sheet

from sheet2api import Sheet2APIClient


sheet = client.open('Return Record 2022')
sheet_instance = sheet.get_worksheet(0)
mylist = sheet_instance.get_all_records()
mylist


def table2022(request):
    return render(request,'table2022.html',{'mylist':mylist})

Solution

Everything we want to pass as context, we should keep inside view we want to use it in. It's more readable when we have more and more code.

What we are going to do, it's define a color for numbers 0-9. I'll pick some light colors for now, you can change them as you prefer.

views.py:

def table2022(request):
    mylist = sheet_instance.get_all_records()
    colors = {'0': 'aqua', '1': 'beige', '2': 'burlywood', '3': 'lightgrey', '4': 'silver', '5': 'skyblue', '6': 'lightblue', '7': 'lightpink', '8': 'lightgreen', '9': 'lawngreen'}
    context = {'mylist': mylist, 'colors': colors}

    return render(request, 'table2022.html', context)

Now, because in templates it's not that simple to use Python, we need to create custom Template Tag. Let's start with creating folder in your app, let's name it custom_tags.py. It should be created in YourProject/your_app/templatetags/ folder, so we have to also create templatetags folder in there.

custom_tags.py:

from django import template

register = template.Library()

@register.filter(name='get_color')
def get_color(colors, number):
    return colors[str(number)[-1]]

your_template.html:

{% load custom_tags %}

...

{% for element in mylist %}
    <tr>
        <td>{{ element.StartDate }}</td>
        <td style="background-color: {{ colors|get_color:element.ID }}">
            {{ element.ID }}
        </td>
        <td>{{ element.Receiver }}</td>
        <td>{{ element.Days }}</td>
    </tr>
{% endfor %}

get_color tag is basically taking whole ID, then extract only last number and make it a string. After that it uses the single number as a key in colors dictionary and passes corresponding value to template, where it is going to be a valid html color.

Custom tags are used to 'implement' some Pythonic code directly into template. Don't use it too much, because most of coding should be in standard files like views.py and models.py. But sometimes there is no better way. :)

For more details about Tags, check that Django's DOCS