0

Faço uma consulta e mostro o resultado em uma tabela como mostro na imagem:

inserir a descrição da imagem aqui

Pretendo que a coluna Zona quando aparece Centro de Dia que a célula fique a vermelho, quando for Exterior a branca, quando for Centro a verde, Infância a amarelo, Lar a azul e Paróquia a castanho e também coloque na mesma cor a célula do Nº Registo.

O meu código para mostrar a tabela:

<?php
$result_cursos = "SELECT Id,
       DesTarefa,
       Period,
       Zona,
       Duracao

FROM centrodb.TarPeriodicas;";


    $resultado_cursos = mysqli_query($conn, $result_cursos);

$tabela1 .= '<div style="float: center" table align="center">';

$tabela1 .= '<table border="5">';

$tabela1 .= '<tr>';

$tabela1 .='<thead>';

$tabela1 .= '<tr>';

$tabela1 .= '<th WIDTH="70">Nº Registo</th>';

$tabela1 .= '<th WIDTH="190">Designação da Tarefa</th>';

$tabela1 .= '<th WIDTH="90">Período</th>';

$tabela1 .= '<th WIDTH="90">Zona</th>';

$tabela1 .= '<th WIDTH="100">Duração</th>';

$tabela1 .= '</tr>';

$tabela1 .='</thead>'; 

$tabela1 .='<tbody>';

    while($rows_cursos = mysqli_fetch_array($resultado_cursos)) {


$tabela1 .= '<tr>';

$tabela1 .= '<td> '.$rows_cursos['Id'].'</td>';

$tabela1 .= '<td>'.$rows_cursos['DesTarefa'].'</td>';

$tabela1 .= '<td>'.$rows_cursos['Period'].'</td>';

$tabela1 .= '<td>'.$rows_cursos['Zona'].'</td>';

$tabela1 .= '<td>'.$rows_cursos['Duracao'].'</td>';

$tabela1 .= '</tr>'; 
}
$tabela1 .= '</tr>';

$tabela1 .='</tbody>'; 

$tabela1 .= '</table>';

$tabela1 .= '</div>';

echo $tabela1;

?>
2
  • Se possível poste seu código na pergunta ou o que você já tentou fazer. Fica mais fácil para responder. 9/03/2018 às 9:00
  • Postei o código que tenho para mostrar a consulta, em relação a alterar as cores das células ainda não tenho nada porque só vi exemplos de mudar a cor das células alternadas ou por par e ímpar, mas isso não é para o meu caso
    – Bruno
    9/03/2018 às 9:20

1 Resposta 1

3

Você pode fazer com JavaScript, assim como adicionar direto no PHP.

Com JavaScript você pode utilizar o jQuery ou Vanilla (Js Puro). Em ambos os casos basta filtrar todos os td da tabela e depois ir comparando os valores, caso o valor corresponda a um dos citados, basta utilizar:

/* JavaScript */
$(elemento).css("background", "cor");

/* JavaScript */
document.querySelector("elemento").style.setProperty("background", "cor");

Segue exemplo comentado:

/* Percorre todos os TR do corpo da tabela */
$("table tbody tr").each(function(index, tr) {

  /**
   * Captura o quarto elemento (vai de 0 até n-1).
   * Esse elemento corresponde à zona.
   */
  let td = $(tr).find("td:eq(3)");

  /* Define a cor padrão */
  let color = "while";

  /**
   * Transforma a palavra em minúsculo e verifica
   * Caso a palavra seja uma das que estão em "case",
   * define uma cor à variável.
   */
  switch (td.text().toLowerCase()) {
    case "centro de dia":
      color = "rgba(255,0,0,.4)";
      break;
    case "exterior":
      color = "#FFF"
      break;
    case "centro":
      color = "rgba(0,128,0,.4)"
      break;
    case "infância":
      color = "rgba(255,255,0,.4)"
      break;
    case "lar":
      color = "rgba(0,0,255,.4)"
      break;
    case "paróquia":
      color = "rgba(165,42,42,.4)"
      break;
  }

  /* Define a cor na cédula Zona */
  $(td).css("background", color)

  /* Define a cor na cédula Nº do Registro */
  $(tr).find("td:eq(0)").css("background", color)
});
table thead th {
  color: red;
  font-weight: bold
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Nº Registro</th>
      <th>Designação</th>
      <th>Período</th>
      <th>Zona</th>
      <th>Duração</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>Compras</td>
      <td>Quinzenal</td>
      <td>Centro de Dia</td>
      <td>1 Dia</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Compras</td>
      <td>Quinzenal</td>
      <td>Exterior</td>
      <td>1 Dia</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Compras</td>
      <td>Quinzenal</td>
      <td>Centro</td>
      <td>1 Dia</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Compras</td>
      <td>Quinzenal</td>
      <td>Infância</td>
      <td>1 Dia</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Compras</td>
      <td>Quinzenal</td>
      <td>Lar</td>
      <td>1 Dia</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Compras</td>
      <td>Quinzenal</td>
      <td>Paróquia</td>
      <td>1 Dia</td>
    </tr>
  </tbody>
</table>

Como você pode criar um array com as cores e nesse array atribuir um valor CSS com o background e color.

Segue exemplo comentado:

<?php

/* Style com as cores */
$styles = [
    "Centro de Dia" => "background:#FFF;color:#F00",
    "Exterior"      => "background:#F00",
    "Centro"        => "background:#008000;color:#F00",
    "Infância"      => "background:#ffff00;color:#F00",
    "Lar"           => "background:#0000ff;color:#F00",
    "Paróquia"      => "background:#a52a2a;color:#F00",
];

$resultado_cursos = mysqli_query($conn, $result_cursos);
$tabela1 .= '<div style="float: center" table align="center">';
$tabela1 .= '<table border="5">';
$tabela1 .= '<tr>';
$tabela1 .='<thead>';
$tabela1 .= '<tr>';
$tabela1 .= '<td>Registro</td>';
$tabela1 .= '<th WIDTH="190">Designação da Tarefa</th>';
$tabela1 .= '<th WIDTH="90">Período</th>';
$tabela1 .= '<td>Zona</td>';
$tabela1 .= '<th WIDTH="100">Duração</th>';
$tabela1 .= '</tr>';
$tabela1 .='</thead>';
$tabela1 .='<tbody>';


/* Percorre todos os registros */
while($rows_cursos = mysqli_fetch_array($resultado_cursos)) {
    $tabela1 .= '<tr>';

    /**
     * Verifica se a variável $styles possui o valor de Zona
     * Caso possua, atribui os valores do índice no atributo style,
     * caso contrário não imprime nada.
     */
    $zona = $rows_cursos['Zona'];
    $corZona = isset( $styles[$zona] ) ? $styles[$zona] : '';

    $tabela1 .= '<td style="'. $corZona .'"> '.$rows_cursos['Id'].'</td>';
    $tabela1 .= '<td>'.$rows_cursos['DesTarefa'].'</td>';
    $tabela1 .= '<td>'.$rows_cursos['Period'].'</td>';
    $tabela1 .= '<td style="'. $corZona .'">'.$rows_cursos['Zona'].'</td>';
    $tabela1 .= '<td>'.$rows_cursos['Duracao'].'</td>';
    $tabela1 .= '</tr>'; 
}

$tabela1 .='</tbody>';
$tabela1 .= '</table>';
$tabela1 .= '</div>';
4
  • No primeiro exemplo só atribui cor vermelha ao cabeçalho da tabela e no caso do array, retira os valores da coluna e aparecem em texto acima da tabela
    – Bruno
    9/03/2018 às 10:18
  • 1
    @Iniciante Se possível posta o código no pastebin.com e posta o link aqui. Aqui no site você pode testar o exemplo com JavaScript, é só clicar em "Executar." 9/03/2018 às 10:25
  • Este link é com o código do array, segundo exemplo: link
    – Bruno
    9/03/2018 às 10:33
  • @Iniciante atualizei minha resposta 9/03/2018 às 10:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .