需要帮助有条件地格式化表格列答案

【问题标题】：Need help conditionally formatting table column需要帮助有条件地格式化表格列
【发布时间】：2020-03-15 22:57:02
【问题描述】：

我是一名电子工程师，具有一定的编程背景（主要是自学）。我创建了一个 Flask 项目，其中包含一些提取 SQL 数据并将其传递给 Jinja2 HTML 模板（通过 Pandas dataframe.to_html）的代码。我还有一个带有一些样式的 CSS 模板。我的最终目标是在 HTML 页面上的表格中显示这些数据。我想利用列单元格中的数据有条件地为一列着色。我还希望能够选择每一列，然后打开另一个包含相应数据的页面。

我已经利用许多不同的思维过程进行了多次迭代。我首先在 pandas 中应用了一些格式，我发现这些格式是有限的，并且很难将（样式器对象）传递到 HTML 模板中以进行进一步的格式化。我试图弄清楚如何使用 HTML 和 CSS 对其进行格式化，但似乎无法完全弄清楚。

我不是嫁给HTML出来的。如果使用 Tkinter 或 PyQT 之类的 GUI 更容易实现，我会走那条路。我真的很想知道“最正确的方法”来完成这个。

HTML 模板

{% block content1 %}
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<table class="mystyle">
{{ table | safe}}
</table>
{% endblock content1 %}

Python 代码

@app.route("/table", methods=('POST', 'GET'))
def table():
    return render_template(
        'table.html', table=current_state.to_html(classes = 'mystyle'), title="Table", )

CSS 代码

.mystyle 
{
    font-size: 20pt;
    font-family: Arial;
    border-collapse: collapse;
    border: 1px solid rgb(0, 0, 0);
}

.mystyle td 
{
font-size:12pt
}

.mystyle td, th 
{
    font-size: 10pt;
    padding:2px;
    color: black;
}

谢谢！！

【问题讨论】：

您可以导入 bootstrap 或其他 css 库以在 html 表格中实现更多功能
我也搞乱了引导程序，但不知道如何使用它来有条件地格式化一列信息。看来我可能注定要学习jQuery了。我认为我可以将其用于格式化以及选择行以获取更多信息。
您正在寻找的是所谓的 css 选择器或 css 类。例如，将一个类添加到第三列。然后你可以为它做一个选择器
哦，好吧...我很欣赏你的洞察力。关闭以完成一些阅读。谢谢！

标签： python css flask jinja2

【解决方案1】：

我知道这不是最优雅的方式，但这就是我解决问题的方式。我使用了 JQuery，使用 (td:nth-child(3)) 定位第三列，然后使用 if 语句来测试单元格的值。然后我使用内联 CSS 命令来相应地格式化文本颜色。当我有机会使用 switch/case 语句时，我会做得更好，但至少现在它可以工作。

感谢大家的帮助！

<html>

<head>
    <title>{{title}}</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}" />

    <script>
        $(document).ready(function () {
            $("#CMMS_Table tr:first").prepend("<th>More Info</th>");
            $("#CMMS_Table tr:gt(0)").prepend("<td><button> INFO </button></td>");
            $('#CMMS_Table th:nth-child(3), table td:nth-child(3)').addClass('state');
            $('#CMMS_Table td:nth-child(3)').each(function () { if ($(this).text() == 'WE') $(this).css('color', '#FF9900'); });
            $('#CMMS_Table td:nth-child(3)').each(function () { if ($(this).text() == 'UMaint') $(this).css('color', '#FF0000'); });
            $('#CMMS_Table td:nth-child(3)').each(function () { if ($(this).text() == 'SMaint') $(this).css('color', '#FA8072'); });
            $('#CMMS_Table td:nth-child(3)').each(function () { if ($(this).text() == 'WP') $(this).css('color', '#CCCC33'); });
            $('#CMMS_Table td:nth-child(3)').each(function () { if ($(this).text() == 'EquipInstall') $(this).css('color', '#0066FF'); });
            $('#CMMS_Table td:nth-child(3)').each(function () { if ($(this).text() == 'UPartWt') $(this).css('color', '#990099'); });
            $('#CMMS_Table td:nth-child(3)').each(function () { if ($(this).text() == 'LE') $(this).css('color', '#CC6600'); });
            $('#CMMS_Table td:nth-child(3)').each(function () { if ($(this).text() == 'ProdRun') $(this).css('color', '#00FF00'); });
            $('#CMMS_Table td:nth-child(3)').each(function () { if ($(this).text() == 'MatlAssist') $(this).css('color', '#CC9999'); });
            $('#CMMS_Table td:nth-child(3)').each(function () { if ($(this).text() == 'OQual') $(this).css('color', '#C993FF'); });
            $('#CMMS_Table td:nth-child(3)').each(function () { if ($(this).text() == 'EquipEng') $(this).css('color', '#B22222'); });
        });
    </script>
</head>

<body>
    <div class="table">
        <div class="top_img">
            <img src="{{url_for('static', filename='double_logo_crop.jpg' )}}" />
        </div>
        {{ table|safe }}
    </div>
    <br>
</body>
</div> -->

</html>

【讨论】：