CODEWITHSUNDEEP
pythonhtmlcssflask
Braiano
Braiano

Reputation: 347

Changing color in HTML table based on passed variable

I am trying to create a table in python Flask, however I have a bit problem with changing color of each line of table. This is my HTML file content:

<tr class=fail>
    <td class="title">Status</td>
    <td>{{ query.get("status") }}</td>
</tr>

where query is a python dictionary which holds two states for status:

query = {"status":"Success"} or query = {"status":"Fail"}

and this is my css file part:

tr.success {
    background-color: #21eaab !important;
}

tr.fail {
    background-color: #f56279 !important;
}

Problem:

all problem happens when I change HTML class from class=fail or class=success to class={{ query.get('status') }} as I wish to don't do it by hand and just pass the value of dictionary to it.

Attempts:

I also tried to change .css content a bit as:

tr.Success {
    background-color: #21eaab !important;
}

tr.Fail {
    background-color: #f56279 !important;
}

even <tr class={{ query.status }}> or <tr class={{ query.get("status") }}> which non of these solutions were not applicable. The problem should be a tiny problem which I can't find.

Upvotes: 0

Views: 1778

Answers (1)

Michael Rodriguez
Michael Rodriguez

Reputation: 2176

Assuming that {{ query.get("status") }} prints "Success" or "Fail" exactly as stated, then this should work:

<tr class={{ query.get("status").lower() }}>
    <td class="title">Status</td>
    <td>{{ query.get("status") }}</td>
</tr>

tr.success {
    background-color: #21eaab !important;
}

tr.fail {
    background-color: #f56279 !important;
}

Keep in mind that !important will only help if you have CSS conflicts within that same scope of specificity. So it's quite possible that your code was working to begin with, but you have a more specific style selector that is overriding your intended result.

For instance you might need to do something like this:

tr.success td {
    background-color: #21eaab !important;
}

tr.fail td {
    background-color: #f56279 !important;
}

But this may result in a thin white line between the cells doing it this way. It will help you better troubleshoot if you are having a specificity scoping conflict, though.

Upvotes: 1

Related Questions