html 表中行的条件样式

Question

我在 html 中有一个 table，它从 PY 中的 SQL 查询中获取数据。我的 SQL table 中的一列是类型 (tp)。我希望 html table 为同一类型的每一行显示一种颜色，为相反的行显示另一种颜色。这是一本财务日记，所以当您输入费用时 SQL 保存该信息。我希望 table 以红色显示历史记录和费用行，以绿色显示收入行。这是我的 PY 和 HTML 代码。请帮助我迷路了

@app.route("/history")
@login_required
def history():
    """Show history of inputs"""

    inputs = db.execute("""
                SELECT amount, category, tp, transacted
                FROM inputs
                WHERE user_id = :user_id
                ORDER BY transacted ASC
                """, user_id=session["user_id"])

    return render_template("history.html", inputs=inputs)

{% extends "layout.html" %}

{% block title %}
    History
{% endblock %}

{% block main %}
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Type</th>
                <th>Amount</th>
                <th>Category</th>
                <th>Transacted</th>
            </tr>
        </thead>
        <tbody>
            {% for input in inputs %}
            <tr>
                <td>{{input["tp"]}}</td>
                <td>{{input["amount"]}}</td>
                <td>{{input["category"]}}</td>
                <td>{{input["transacted"]}}</td>
            </tr>
            {% endfor %}
         </tbody>
    </table>
{% endblock %}

Answer 1

你能检查一下下面的代码是否有效吗？在 css 文件中定义“红色”和“绿色”css 类。

        <tbody>
            {% for input in inputs %}
            <tr>
                {% if input["tp"] == 'expense' %}
                    <td class="red">{{input["tp"]}}</td>
                    <td class="red">{{input["amount"]}}</td>
                    <td class="red">{{input["category"]}}</td>
                    <td class="red">{{input["transacted"]}}</td>
                {% else %}
                    <td class="green">{{input["tp"]}}</td>
                    <td class="green">{{input["amount"]}}</td>
                    <td class="green">{{input["category"]}}</td>
                    <td class="green">{{input["transacted"]}}</td>
                {% endif %}
            </tr>
            {% endfor %}
         </tbody>

html 表中行的条件样式

Conditional style for rows in html tables

html

css

tr