Como aplicar cores dinâmicas em células de tabela HTML com base em prefixo de string usando JavaScript e CSS?

[Diegommsantos]

O sistema recebe uma lista de dados (resultados) que contém informações sobre os elementos a serem exibidos nas células de uma tabela. Cada entrada tem um formato específico que inclui uma string que representa a cor. Esta string deve ter um prefixo específico para identificar que ela contém uma cor que deve ser aplicada à célula.

O valor em cada célula pode ser uma string que começa com o prefixo linha-cor-. Este prefixo é seguido pelo código hexadecimal da cor. Por exemplo:

linha-cor-#a29696

Quando o sistema renderiza a tabela, ele verifica cada valor nas células.

Se o valor começa com linha-cor-, o sistema extrai o código hexadecimal da cor (o que vem após o prefixo).

O sistema então aplica esta cor como o fundo da célula usando a propriedade CSS background-color.

Se o valor não começa com linha-cor-, o sistema deve aplicar um fundo padrão (por exemplo, background-color: transparent;), para que a célula não tenha uma cor de fundo.

Além de aplicar a cor, o sistema deve exibir o valor original da célula, para que os usuários possam ver a informação que ela contém.

 

estou tentando replicar esse sistema, ai não estou conseguindo fazer com que as cores sejam atribuídas conforme a regra

 

essa é a rota:

# Aplica as regras para os resultados

            for regra in regras:

                ds_valor, ds_cor, ie_icon_replace, nm_icon, ie_celula_linha, nm_class, nm_usuario_atualizacao, nm_usuario_criacao, dt_criacao, dt_atualizacao = regra

 

                if ie_celula_linha == 'C':

                    # Preenche apenas a célula correspondente

                    for index in range(len(resultados)):

                        coluna_a_preencher = 0

                       

                        # Converte a tupla em lista para poder modificar

                        linha_atual = list(resultados[index])

 

                        # Verifica se a célula específica deve ser preenchida

                        if len(linha_atual) > coluna_a_preencher:

                            if ie_icon_replace == 'S':

                                # Se marcado para substituir com ícone, adiciona o ícone

                                linha_atual[coluna_a_preencher] = f'<i class="{nm_icon}"></i>'

                            else:

                                    # Adiciona a classe CSS para a cor da célula

                                linha_atual[coluna_a_preencher] = f'<span class="celula-cor-{ds_cor}">{linha_atual[coluna_a_preencher]}</span>'

 

                                resultados[index] = tuple(linha_atual)

 

                elif ie_celula_linha == 'L':

                    # Preenche toda a linha da tabela

                    for index in range(len(resultados)):

                        linha_atual = list(resultados[index])  # Converte a tupla em lista

                        if ie_icon_replace == 'S':

                            # Substitui toda a linha com o ícone

                            resultados[index] = [f'<i class="{nm_icon}"></i>'] * len(linha_atual)

                        else:

                            # Aplica a cor em toda a linha

                            resultados[index] = [f'<span class="linha-cor-{ds_cor}">{valor}</span>' for valor in linha_atual]

 

                if ie_icon_replace == 'S':

                    # Substitui o valor da célula pelo nm_icon

                    for index in range(len(resultados)):

                        coluna_icon = 1

                        linha_atual = list(resultados[index])  # Converte a tupla em lista

 

                        # Verifica se a coluna do ícone está vazia ou deve ser substituída

                        if len(linha_atual) > coluna_icon and linha_atual[coluna_icon] is not None:

                            linha_atual[coluna_icon] = nm_icon  # Substitui pelo nm_icon

                            resultados[index] = tuple(linha_atual)  # Converte de volta para tupla

 

            # Coleta das regras em uma lista

            regras_resultados = []

            for regra in regras:

                ds_valor = regra[0] if regra[0] is not None else ''

                ds_cor = regra[1] if regra[1] is not None else ''

                ie_icon_replace = regra[2] if regra[2] is not None else ''

                nm_icon = regra[3] if regra[3] is not None else ''

                ie_celula_linha = regra[4] if regra[4] is not None else ''

                nm_class = regra[5] if regra[5] is not None else ''

                nm_usuario_atualizacao = regra[6] if regra[6] is not None else ''

                nm_usuario_criacao = regra[7] if regra[7] is not None else ''

                dt_criacao = regra[8] if regra[8] is not None else ''

                dt_atualizacao = regra[9] if regra[9] is not None else ''

               

            # Executa o SQL da regras

                cursor.execute(regras_query)

                regras_resultados = cursor.fetchall()

               

               

                # Adiciona os resultados e os dados das regras à lista

               

                regras_resultados.append({

                    'ds_legendas': ds_valor,

                    'ds_cor_legendas': ds_cor,

                    'ie_icon_replace': ie_icon_replace,

                    'nm_icon': nm_icon,

                    'ie_celula_linha': ie_celula_linha,

                    'nm_class': nm_class,

                    'nm_usuario_atualizacao':  nm_usuario_atualizacao,

                    'nm_usuario_criacao' :    nm_usuario_criacao,

                    'dt_criacao' :  dt_criacao,

                    'dt_atualizacao' :  dt_atualizacao

                })

html/javascript:

<!DOCTYPE html>

<html lang="pt-BR">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{{ titulo_painel }}</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

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

    <script src="{{ url_for('static', filename='js/script.js') }}"></script>

</head>



<body class="dark-theme">

    <div class="container-fluid mt-4 page" style="padding: 0;">

        <div class="header-painel" style="padding: 10px;">

            <h1 class="text-center">{{ titulo_painel }}</h1>

            <a href="{{ url_for('lista_paineis') }}" class="btn btn-back btn-primary">

                <i class="fas fa-arrow-left" style="margin-top: -10px;"></i> Voltar

            </a>

        </div>



        {% if resultados %}

        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"

            data-interval="{{ segundos_rolagem * 1000 }}">

            <ol class="carousel-indicators" style="height: 1px;">

                {% for i in range((total + per_page - 1) // per_page) %}

                <li data-target="#carouselExampleIndicators" data-slide-to="{{ i }}"

                    class="{{ 'active' if i == 0 else '' }}"></li>

                {% endfor %}

            </ol>

            <div class="carousel-inner">

                {% for i in range((total + per_page - 1) // per_page) %}

                <div class="carousel-item {{ 'active' if i == 0 else '' }}"

                    style="height: auto; width: 100%; text-overflow: ellipsis; padding: 10px;">

                    <div class="table-responsive">

                        <table class="table table-bordered table-dark"

                            style="table-layout: fixed; width: 100%; height: auto">

                            <thead>

                                <tr>

                                    {% for coluna in titulos %}

                                    <th scope="col">{{ coluna }}</th>

                                    {% endfor %}

                                </tr>

                            </thead>

                           

                            <tbody>

    {% set start_index = i * per_page %}

    {% set end_index = start_index + per_page %}

    {% set pagina_dados = resultados[start_index:end_index] %}

    {% if pagina_dados|length > 0 %}

        {% for resultado in pagina_dados %}

        <tr>

            {% for valor in resultado %}

            <td style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">

                {{ valor|safe }} <!-- Exibe o valor com as classes ou ícones já processados -->

                <script>

                    // Extraindo a cor do valor

                    var cellContent = {{ valor|tojson }};

                    console.log("Conteúdo da célula:", cellContent); // Debug



                    // O regex vai capturar a primeira cor no formato "linha-cor-#<cor>"

                    var corMatch = cellContent.match(/linha-cor-(#[0-9a-fA-F]{6})/); // Extrai a cor usando regex

                   

                    // Aplicando a cor ao fundo da célula

                    if (corMatch && corMatch[1]) {

                        var cor = corMatch[1]; // A cor encontrada

                        console.log("Cor do valor:", cor); // Exibe a cor encontrada



                        // Aplica a cor ao estilo da célula

                        $(document).ready(function() {

                            $(this).css('background-color', cor); // 'this' agora refere-se ao <td> correto

                        });

                    } else {

                        console.log("Nenhuma cor encontrada para o valor:", cellContent);

                    }

                </script>

            </td>

            {% endfor %}

        </tr>

        {% endfor %}

    {% else %}

    <tr>

        <td colspan="{{ titulos|length }}" class="text-center">Nenhum dado disponível nesta página.</td>

    </tr>

    {% endif %}

</tbody>



                           



                        </table>

                    </div>

                </div>

                {% endfor %}

            </div>

        </div>

        {% else %}

        <p class="text-center">Nenhum dado disponível para este painel.</p>

        {% endif %}



        <!-- Dashboard cards -->

        <div class="row" id="dashboard-container">

            {% for dashboard in dashboards %}

            <div class="col-md-3 mb-3">

                <div class="card dashboard-card" id="card-{{ loop.index }}" data-cor="{{ dashboard.cor }}">

                    <div class="card-body">

                        <h5 class="card-title">{{ dashboard.titulo }}: {{ dashboard.dados | join(', ') }}</h5>

                    </div>

                </div>

            </div>

            {% endfor %}

        </div>



        <!-- Cards das Legendagens -->

        <div class="row" id="legenda-container">

            {% for legenda in legendas %}

            <div class="col-md-6 mb-6 ">

                <div class="card legenda-card" id="legenda-{{ loop.index }}" data-cor="{{ legenda.cor }}">

                    <div class="card-body">

                        <h5 class="card-title">{{ legenda.titulo }}</h5>

                    </div>

                </div>

            </div>

            {% endfor %}

        </div>




        <footer class="footer">

            <div class="row" id="footer-container" style="flex-wrap: wrap; justify-content: flex-start;">



            </div>

        </footer>



    </div>

</body>



</html>

 

 

 

 

Editado 3 horas atrás por Casa do Desenvolvedor
Inserção do código na caixa de 'code'.