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 %}
            <th>Price per share</th>
        {% for row in transactions %}
           <td>{{ row['type'] }}</td>
           <td>{{ row['symbol'] }}</td>
           <td>{{ row['shares'] }}</td>
           <td>{{ row['price'] }}</td>
           <td>{{ row['time'] }}</td>
        {% endfor %}
{% 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.

  • Maybe you could take the innerText of the things in the table by iterating over them using a for loop, and then make some code that converts the text into a color and then insert that using a backgroundColor, and then use a setInterval to update. Then again, I'm probably not the best person to answer this. Just look at my stackoverflow questions. Jul 21 '20 at 20:55

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;

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .