时间戳

首页 > 解决方案 > 需要帮助有条件地格式化表格列

python - 需要帮助有条件地格式化表格列

问题描述

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

我想要的示例（在 Excel 中创建）

我已经利用许多不同的思维过程进行了多次迭代。我首先在 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;
}

谢谢你！！

标签： pythoncssflaskjinja2

解决方案

我知道这不是最优雅的方式，但这就是我解决问题的方式。我使用了 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>

推荐阅读