How to insert javascript to change cell CSS class in a Flask WTF jinja2 table data cell based on the cell value?

Question

I am using Flask WTF to display the results of a database query, but I would like to change the color of the cell background to light red if the value is less than 25. I am not certain how and where to insert the javascript to test the cell value and change the CSS class for that data cell. At present I can change the whole column data to bootstrap class "bg-danger", but not one cell.

Here is a simplified version of the python code:

import os
import logging

from flask import Flask, render_template
from flask_bootstrap import Bootstrap
from flask_moment import Moment
from flask_table import Table, Col

app = Flask(__name__)
bootstrap = Bootstrap(app)
moment = Moment(app)


class damLevel(object):
    def __init__(self, Dam, PercentFull):
        self.Dam = Dam
        self.PercentFull = PercentFull

class damTable(Table):
    classes = ['table', 'table-bordered', 'table-striped']
    Dam = Col('Dam')
    PercentFull = Col(name='PercentFull',attr='PercentFull', td_html_attrs={'class':'bg-danger'})

@app.route('/', methods=['GET'])
def index():

    damData = [damLevel('Boulder', '85'),
             damLevel('FishPond', '7')]

    damForm=damTable(damData)

    return render_template('damlevels.html', damForm=damForm)

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=int(os.environ.get('PORT', 8080)))

Here is the HTML template:

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}DamLevels{% endblock %}

{% block page_content %}
<div class="page-header">
    <h1>Dam Levels</h1>
</div>
<div class="container" >
    <form action="" method="get" class="form" role="form">
        <div class="row" style="width:32em">
            {{ damForm }}
        </div>
        <div class="row">
            <a href="/">Return</a>
        </div>
    </form>
</div>
{% endblock %}

You can but you do not need js here. You can add a class to the cell when the value is less than 25: class="less-than-25". And use CSS ... — voscausa, Nov 01 '21 at 16:10
@voscausa, yes, but how do I assign that class when the value is less than 25, but not otherwise? — Peter Retief, Nov 02 '21 at 11:44

score 0 · Accepted Answer · answered Nov 24 '21 at 07:53

I managed to get this to work by iterating within Jinja2 as follows:

import os
import logging

from flask import Flask, render_template
from flask_bootstrap import Bootstrap
from flask_moment import Moment
from flask_table import Table, Col
from flask_wtf import FlaskForm

app = Flask(__name__)
bootstrap = Bootstrap(app)
moment = Moment(app)
app.config['SECRET_KEY'] = 'NobodyCanGuessThisKey'


class damLevel(object):
    def __init__(self, Dam, PercentFull):
        self.Dam = Dam
        self.PercentFull = PercentFull

class damTable(Table):
    classes = ['table', 'table-bordered', 'table-striped']
    Dam = Col('Dam')
    PercentFull = Col('PercentFull')

@app.route('/', methods=['GET'])
def index():

    damData = [damLevel('Boulder', '85'),
             damLevel('FishPond', '7')]

    damForm=damTable(damData)
    
    print ("damForm type :",type(damData))

    return render_template('damlevels.html', form=damData)

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=int(os.environ.get('PORT', 8080)))

HTML Template:

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}DamLevels{% endblock %}

{% block page_content %}
  <table id="data" class="table table-striped" style="width:16em">
    <thead>
      <tr>
        <th>Dam</th>
        <th class="text-right">PercentFull</th>
      </tr>
    </thead>
    <tbody>
      {% for damItem in form %}
        <tr>
          <td>{{ damItem.Dam }}</td>
          <td>
            {% set number = damItem.PercentFull | float %}
            {% if number < 25.0 -%}
                <p class="bg-danger text-right">{{ damItem.PercentFull }}</p>
            {% else -%}
                <p class="text-right">{{ damItem.PercentFull }}</p>
            {% endif %}
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

{% endblock %}

How to insert javascript to change cell CSS class in a Flask WTF jinja2 table data cell based on the cell value?

1 Answers1