Question

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

Example of what I wanted (Created in Excel)

我已经使用许多不同的思维过程进行了许多迭代。我首先在熊猫中应用了一些格式设置，但我发现这是有限的，并且很难将（样式对象）传递到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;
}

谢谢！

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

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

1 个答案: