Different colors in cells

0

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

IwanttheZonecolumnwhenDayCentertohavethecellturnredwhenOutsideGreentoChildtoyellow,HometoblueandParishtobrownandalsoputthesamecolorinthecellRegistration#.

Mycodetoshowthetable:

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

?>
    
asked by anonymous 09.03.2018 / 09:40

1 answer

3

You can do with JavaScript as well as add direct to PHP.

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

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

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

Commented example:

/* 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>CentrodeDia</td><td>1Dia</td></tr><tr><td>2</td><td>Compras</td><td>Quinzenal</td><td>Exterior</td><td>1Dia</td></tr><tr><td>3</td><td>Compras</td><td>Quinzenal</td><td>Centro</td><td>1Dia</td></tr><tr><td>4</td><td>Compras</td><td>Quinzenal</td><td>Infância</td><td>1Dia</td></tr><tr><td>5</td><td>Compras</td><td>Quinzenal</td><td>Lar</td><td>1Dia</td></tr><tr><td>6</td><td>Compras</td><td>Quinzenal</td><td>Paróquia</td><td>1Dia</td></tr></tbody></table>

HowcanyoucreateaarraywithcolorsandinthatarrayassignaCSSvaluewithtdandbackground.

Commentedexample:

<?php/*Stylecomascores*/$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>';
    
09.03.2018 / 10:31