Dynamically change the row colour of a table in HTML that was generated using jinja

Question

As part of PSET8 finance additional implementations, I want to dynamically colour the table in history.html.

The simple code uses jinja2? to populate and print out a table in html.

{% extends "layout.html" %}

{% block title %}
    Log In
{% endblock %}

{% block main %}
    <h2>History</h2>
    <table>
        <tr>
            <th>Action</th>
            <th>Symbol</th>
            <th>Shares</th>
            <th>Price per share</th>
            <th>Timestamp</th>
        </tr>
        {% for row in transactions %}
        <tr>
           <td>{{ row['type'] }}</td>
           <td>{{ row['symbol'] }}</td>
           <td>{{ row['shares'] }}</td>
           <td>{{ row['price'] }}</td>
           <td>{{ row['time'] }}</td>
        </tr>
        {% endfor %}
    </table>
{% endblock %}

What I want to do is add some code (JS probably?) that will look at value inside the cell row['type'] and then, depending on that value, change the background of that entire row into a certain colour. However, I have no idea where to begin.

Answer 1

You could add a class attribute to the <tr> element and then add CSS directives for each (or a specific) type. It would be something like <tr class="{{ row['type'] }}"> in the html and in the css (or the style element in layout.html):

.type1 {
    background-color: green;
}