Условное изменение форматирования ячеек в таблице, генерируемой циклом

Мое приложение django генерирует таблицу на основе python dictionary "участников". Для этого он использует приведенный ниже код HTML, в котором есть цикл, проходящий через все *elements* "участников". Таблица формируется без каких-либо проблем.

Теперь я хочу условно изменить цвет фона колонки со значением "balance" в зависимости от того, равно ли это значение > 0, < 0, или = 0. Для этого я вставил javascript внизу HTML body. Но это не дает никакого эффекта. Как можно исправить код?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Participants</title>
</head>
<body>

<h1 id="title">Participants</h1>

<table id="participants_table" border="1">

    {% for x in participants %}
    <tr>    
        <td>{{ x.firstName }}</td>
        <td>{{ x.lastName }}</td>
        <td class="balance">{{ x.balance }}</td> 
    </tr>
    {% endfor %}

</table>

<script>
        var balance = document.getElementById('participants_table').getElementsByClassName('balance');
        if (balance.innerHTML > 0){
            balance.style.backgroundColor='#003F87';
        } else if (balance.innerHTML < 0) {
            balance.style.backgroundColor='#0033H7';
        } else {
            balance.style.backgroundColor='#0093H7';
        }
</script>

</body>
</html>

Теоретически это должно работать.

<td style=background-color: "{% if x.balance > 0 %}#003F87{% elif 
 x.balance < 0 %}#0033H7 {%else%)#0093H7{% endif %}">{{ x.balance 
}}</td>

Поэтому я использую встроенную стилизацию (не рекомендуется) и условное отображение цвета bg. Если вы используете что-то вроде Bootstrap, то это может быть чище, например, так:

 <td class="{% if x.balance > 0 %}bg-primary{% elif x.balance < 0 
 %}bg-warning{%else%)bg-secondary{% endif %}>{{ x.balance }}</td>
Вернуться на верх