Different colors in cells

Question

I make a query and show the result in a table as shown in the image:

I intend that the column Zone when he shows up Daycare the cell turns red when it is Exterior the white one, when it’s Center in green, Childhood in yellow, Home the blue and Parish brown and also put in the same color the cell of Registration No.

My code to show the table:

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

?>

Answer 1

You can do with Javascript, as well as adding direct in PHP.

With Javascript you can use the jQuery or Vanilla (Js Pure). In both cases just filter all the td of the table and then compare the values, if the value corresponds to one of the cited, just use:

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

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

Following example commented:

/* 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>

How can you create a array with the colors and in this array assign a CSS value with the background and color.

Following example commented:

<?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>';