javascript - 如何根据单元格值插入 javascript 以更改 Flask WTF jinja2 表格数据单元格中的单元格 CSS 类？

Question

我正在使用 Flask WTF 来显示数据库查询的结果，但是如果值小于 25，我想将单元格背景的颜色更改为浅红色。我不确定如何以及在何处插入要测试的 javascript单元格值并更改该数据单元格的 CSS 类。目前我可以将整列数据更改为引导类“bg-danger”，但不能更改一个单元格。

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

这是 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 %}

标签： javascriptjinja2flask-table

Answer 1

我设法通过在 Jinja2 中进行迭代来使其工作，如下所示：

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 模板：

{% 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 %}