I have integrated Flask WTF to showcase the results of a database query. I am seeking a way to modify the cell background color to light red if the value is below 25. I am unsure about where and how to embed the JavaScript code to validate the cell value and adjust the CSS class for that particular data cell. Currently, I can only alter the entire column data to utilize the Bootstrap class "bg-danger" but not individual cells.
Below is a simplified snippet 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 an example of 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 %}