Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

201
Vistas
¿Cómo insertar javascript para cambiar la clase CSS de la celda en una celda de datos de la tabla Flask WTF jinja2 según el valor de la celda?

Estoy usando Flask WTF para mostrar los resultados de una consulta de la base de datos, pero me gustaría cambiar el color del fondo de la celda a rojo claro si el valor es inferior a 25. No estoy seguro de cómo y dónde insertar el javascript para probar el valor de la celda y cambie la clase CSS para esa celda de datos. En la actualidad, puedo cambiar los datos de toda la columna a la clase de arranque "bg-danger", pero no una celda.

Aquí hay una versión simplificada del código python:

 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)))

Aquí está la plantilla HTML:

 {% 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 %}
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Logré que esto funcionara iterando dentro de Jinja2 de la siguiente manera:

 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)))

Plantilla HTML:

 {% 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 %}
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda