Нужна помощь по условному форматированию столбца таблицы - PullRequest
Новая
       14

Нужна помощь по условному форматированию столбца таблицы

0 голосов
/ 16 марта 2020

Я инженер-электронщик с некоторым опытом программирования (в основном самоучка). Я создал проект Flask с некоторым кодом, извлекающим данные SQL и передающим его в шаблон Jinja2 HTML (через Pandas dataframe.to_ html). У меня также есть шаблон CSS с некоторыми стилями. Моя последняя цель - отобразить эти данные в таблице на странице HTML. Есть один столбец, который я бы хотел покрасить условно, используя данные в ячейке столбцов. Я также хотел бы иметь возможность выбрать каждый столбец, который затем откроет другую страницу с соответствующими данными.

Example of what I wanted (Created in Excel)

Я прошел много итераций этого, используя множество различных мыслительных процессов. Вначале я применил некоторое форматирование в pandas, которое, как я обнаружил, было ограничено и было трудно передать (объект-стилист) в шаблон HTML для дальнейшего форматирования. Я попытался выяснить, как отформатировать его с HTML и с CSS, но, похоже, не совсем понял.

Я не женат на HTML. Если это проще сделать с помощью GUI, например, Tkinter или PyQT, я выберу go этот маршрут. Я просто очень хотел бы знать, "Самый правильный путь", чтобы выполнить sh это.

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;
}

Спасибо !!

1 Ответ

0 голосов
/ 24 марта 2020

Я знаю, что это не самый элегантный способ, но именно так я решил свою проблему. Я использовал 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>
...