Change the color of a cell according to the value

Question

Change the color of a cell according to the value

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

I have a page with a table that shows information on the amount of items planned to be performed and the number of items actually made at the end of each month.

Iwasaskedif,inthemonth,moreitemsaremadethanexpected,thecellthatshowsthequantityisgreenandotherwisered.

Ihavenoideaofthepossibilityofdoingthis,butifanyoneknowshowtodoit,pleasecommenthere.

Thetablecode:

<!--Main--><divclass="content-lg container">
            <div class="row margin-b-20">
                <div class="col-sm-6">
                    <h2>Prev x Real Month</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 sm-margin-b-50">

                    <script type="text/javascript">
                        //Pegar o ID do botão clicado 
                        function abreModal (idR)
                        {
                            $.post("/Teste_Obeya/ajax.php", 
                            { id : idR }, function(content){
                                $(".modal-body").html(content); 
                            }, 'html');
                        }
                    </script>


                            <?php

                            require 'conn.php';

                            //Conexão e consulta ao Mysql
                            $qry = mysqli_query($lnk, "select * from qualite");

                            //Pegando os nomes dos campos
                            $num_fields = mysqli_num_fields($qry);//Obtém o número de campos do resultado

                            for($i = 0;$i<$num_fields; $i++){//Pega o nome dos campos
                                $fields[] = mysqli_fetch_field_direct($qry,$i)->name;
                            }

                            //Montando o cabeçalho da tabela
                            $table = '<table  class="table table-hover table-inverse"> <tr style="">';

                            for($i = 0;$i < $num_fields; $i++){
                                $table .= '<th style="padding-right:5px;">'.$fields[$i].'</th>';
                            }

                            //Montando o corpo da tabela
                            $table .= '<tbody >';
                            while($r = mysqli_fetch_array($qry)){
                                $table .= '<tr>';
                                for($i = 0;$i < $num_fields; $i++){
                                    $table .= '<td>'.$r[$fields[$i]].'</td>';
                                }

                                // Adicionando botão de edição

                                $table .= '<td><form action="qualite-edicao.php" method="post">'; 
                                $table .= '<input type="hidden" name="ID" value="'.$r['ID'].'">';
                                $table .= '<input type="hidden" name="KPI" value="'.$r['KPI'].'">';
                                $table .= '<input type="hidden" name="PILOTE" value="'.$r['PILOTE'].'">';
                                $table .= '<input type="hidden" name="JAN PREV" value="'.$r['JAN_PREV'].'">';
                                $table .= '<input type="hidden" name="JAN REAL" value="'.$r['JAN_REAL'].'">';
                                $table .= '<input type="hidden" name="FEV PREV" value="'.$r['FEV_PREV'].'">';
                                $table .= '<input type="hidden" name="FEV REAL" value="'.$r['FEV_REAL'].'">';
                                $table .= '<input type="hidden" name="MAR PREV" value="'.$r['MAR_PREV'].'">';
                                $table .= '<input type="hidden" name="MAR REAL" value="'.$r['MAR_REAL'].'">';
                                $table .= '<input type="hidden" name="ABR PREV" value="'.$r['ABR_PREV'].'">';
                                $table .= '<input type="hidden" name="ABR REAL" value="'.$r['ABR_REAL'].'">';
                                $table .= '<input type="hidden" name="MAI PREV" value="'.$r['MAI_PREV'].'">';
                                $table .= '<input type="hidden" name="MAI REAL" value="'.$r['MAI_REAL'].'">';
                                $table .= '<input type="hidden" name="JUN PREV" value="'.$r['JUN_PREV'].'">';
                                $table .= '<input type="hidden" name="JUN REAL" value="'.$r['JUN_REAL'].'">';
                                $table .= '<input type="hidden" name="JUL PREV" value="'.$r['JUL_PREV'].'">';
                                $table .= '<input type="hidden" name="JUL REAL" value="'.$r['JUL_REAL'].'">';
                                $table .= '<input type="hidden" name="AGO PREV" value="'.$r['AGO_PREV'].'">';
                                $table .= '<input type="hidden" name="AGO REAL" value="'.$r['AGO_REAL'].'">';
                                $table .= '<input type="hidden" name="SET PREV" value="'.$r['SET_PREV'].'">';
                                $table .= '<input type="hidden" name="SET REAL" value="'.$r['SET_REAL'].'">';
                                $table .= '<input type="hidden" name="OUT PREV" value="'.$r['OUT_PREV'].'">';
                                $table .= '<input type="hidden" name="OUT REAL" value="'.$r['OUT_REAL'].'">';
                                $table .= '<input type="hidden" name="NOV PREV" value="'.$r['NOV_PREV'].'">';
                                $table .= '<input type="hidden" name="NOV REAL" value="'.$r['NOV_REAL'].'">';
                                $table .= '<input type="hidden" name="DEZ PREV" value="'.$r['DEZ_PREV'].'">';
                                $table .= '<input type="hidden" name="DEZ REAL" value="'.$r['DEZ_REAL'].'">';
                                $table .= '<button class="btn btn-primary"><i class="fa fa-calendar-o" aria-hidden="true"></i></i> Editar </i></button>'; //
                                $table .= '</form></td>';



                                //MODAL COM O GRÁFICO
                                $table .= '<td><form action="graf-qualite.php" method="post">'; 
                                $table .= '<input type="hidden" name="ID" value="'.$r['ID'].'">';
                                $table .= '<input type="hidden" name="KPI" value="'.$r['KPI'].'">';
                                $table .= '<input type="hidden" name="PILOTE" value="'.$r['PILOTE'].'">';
                                $table .= '<input type="hidden" name="JAN PREV" value="'.$r['JAN PREV'].'">';
                                $table .= '<input type="hidden" name="JAN REAL" value="'.$r['JAN REAL'].'">';
                                $table .= '<input type="hidden" name="FEV PREV" value="'.$r['FEV PREV'].'">';
                                $table .= '<input type="hidden" name="FEV REAL" value="'.$r['FEV REAL'].'">';
                                $table .= '<input type="hidden" name="MAR PREV" value="'.$r['MAR PREV'].'">';
                                $table .= '<input type="hidden" name="MAR REAL" value="'.$r['MAR REAL'].'">';
                                $table .= '<input type="hidden" name="ABR PREV" value="'.$r['ABR PREV'].'">';
                                $table .= '<input type="hidden" name="ABR REAL" value="'.$r['ABR REAL'].'">';
                                $table .= '<input type="hidden" name="MAI PREV" value="'.$r['MAI PREV'].'">';
                                $table .= '<input type="hidden" name="MAI REAL" value="'.$r['MAI REAL'].'">';
                                $table .= '<input type="hidden" name="JUN PREV" value="'.$r['JUN PREV'].'">';
                                $table .= '<input type="hidden" name="JUN REAL" value="'.$r['JUN REAL'].'">';
                                $table .= '<input type="hidden" name="JUL PREV" value="'.$r['JUL PREV'].'">';
                                $table .= '<input type="hidden" name="JUL REAL" value="'.$r['JUL REAL'].'">';
                                $table .= '<input type="hidden" name="AGO PREV" value="'.$r['AGO PREV'].'">';
                                $table .= '<input type="hidden" name="AGO REAL" value="'.$r['AGO REAL'].'">';
                                $table .= '<input type="hidden" name="SET PREV" value="'.$r['SET PREV'].'">';
                                $table .= '<input type="hidden" name="SET REAL" value="'.$r['SET REAL'].'">';
                                $table .= '<input type="hidden" name="OUT PREV" value="'.$r['OUT PREV'].'">';
                                $table .= '<input type="hidden" name="OUT REAL" value="'.$r['OUT REAL'].'">';
                                $table .= '<input type="hidden" name="NOV PREV" value="'.$r['NOV PREV'].'">';
                                $table .= '<input type="hidden" name="NOV REAL" value="'.$r['NOV REAL'].'">';
                                $table .= '<input type="hidden" name="DEZ PREV" value="'.$r['DEZ PREV'].'">';
                                $table .= '<input type="hidden" name="DEZ REAL" value="'.$r['DEZ REAL'].'">';
                                $table .= '<!-- Button -->
                                            <button type="button" class="btn btn-info button" data-toggle="modal" data-target="#exampleModal" name="button" onclick="abreModal(' . $r['ID'] .');">
                                              Gráfico
                                            </button>

                                            <!-- Modal -->

                                            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" onload="click("button");">
                                              <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                  <div class="modal-header">
                                                    <h5 class="modal-title" id="exampleModalLabel">Gráfico</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                      <span aria-hidden="true">&times;</span>
                                                    </button>
                                                    </div>
                                                    <div class="modal-body">


                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                    </div>
                                                </div>
                                              </div>
                                            </div>'; //
                                $table .= '</form></td>';

                            }

                            //Finalizando a tabela
                            $table .= '</tbody></table>';


                            //Imprimindo a tabela
                            echo '<div class="table-table" style="overflow-x:auto;">';
                            echo $table;
                    ?>

                    </div>
                </div>
            </div>
        </div>

This is the bank:

php html css table

asked by anonymous 09.07.2018 / 15:00

2 answers

2

It would be simple to compare on the line you generate td , but you're doing it in a for dynamically, using an index rather than field names, which makes it difficult. Looking at your code, we can see that the first column with the value "predicted" is the fourth, if we think of the index of the array, index 3 and the real index 4.

We can then use the following logic: "If the index column is odd, from 3a it will be the expected value, and if even, the real value"
Then you can create two variables, one for the predicted value and one for the actual value, save their respective values according to the index (even or odd), in their case the variable $i , and assign a class in TD according to the background color you want.

First, add in your CSS two classes, for example like this:

.fundoVerde {
   background-color: green;
   color: #fff
}
.fundoVermelho {
   background-color: red;
   color: #fff
}

Next, in the% w / o of% that generates the columns, implement the logic I proposed above:

$nomeClasse = 'class=""';
$prev = 0;
$real = 0;
for($i = 0;$i < $num_fields; $i++){
   if ($i >= 3) {
      // Se par
      if ($i % 2 == 0) {
         $real = $r[$fields[$i]];
         if ($real > $prev) {
            $nomeClasse = 'class="fundoVerde"'
         else
            $nomeClasse = 'class="fundoVermelho"';
         }
      } else {
         // se ímpar
         $nomeClasse = 'class=""';
         $prev = $r[$fields[$i]];
      }
   }
   // concatena a classe
   $table .= '<td '.$nomeClasse.'>'.$r[$fields[$i]].'</td>';
}

The logic is this, you may need to convert the value to compare or some small adjustment.

09.07.2018 / 17:25

PHP does not recognize connection as parameter Hibernate - How to fetch all rows from a table with Hibernate?

score 2 · Accepted Answer

I'm going to have to invent names to help you out because I did not post the sql code as the names of the columns that return the database values.

So I see your While loop response with the line numbers corresponding to your query in the database while loop FOR reads field by field returned from the query. Take the FOR loop and just do the while using the column names in the proper code as below:

//Montando o corpo da tabela
$table .= '<tbody >';
while($r = mysqli_fetch_array($qry)){
    $table .= '<tr>';
    for($i = 0;$i < $num_fields; $i++){
        $table .= '<td>'.$r[$fields[$i]].'</td>';
    }
}

Within your loop where you print the output of each ballot you have the $ r variable. Right ?

Carrying to color the output, let's say that the desired monthly value attribute is a column in your qualite table that we'll call here MonthlyPretended and the value reached is a column here called MonthlyAlcoached .

You could change your code and do this:

while($r = mysqli_fetch_array($qry)){
    $table .= '<tr>';
    if($r['MensalPretendido'] > $r['MensalAlcancado']){
      $table .= '<td style="background:red;">'.$r['MensalPretendido'].'</td>';
      $table .= '<td style="background:red;">'.$r['MensalAlcancado'].'</td>';
    }else{
      $table .= '<td style="background:green;">'.$r['MensagemPretendido'].'</td>';
      $table .= '<td style="background:green;">'.$r['MensalAlcancado'].'</td>';
    }
    //aqui concatena na variavel **$table** outras colunas da tabela se 
    //houver....
}

That is; if the value of the MonthlyPretended column is greater than the MonthlyAccident value, print the banknote in red otherwise print in green.

Through what I've tried, I tried to easily return the answer, but I did not have the field names to rewrite the code so I adapted it to your project.

Update

All answers given here are based on an understanding of logic, both my response and that of the magnificent Ricardo Pontual provided the completely correct logic of achieving the desired result! Now if you want to copy and paste without worrying about understanding and debugging your code you will need to pass the full access to your entire environment so that we have the same understanding of the person who modeled the code.

First you need to configure your programming environment to display errors and warnings, this is done by changing a directive inside your php.ini named display_erros for ON or at the top of your php page use

<?php
    ini_set('display_errors', 1);
    ini_set('display_startup_errors', 1);
    error_reporting(E_ALL);
?>

otherwise it is difficult to understand what is happening. I'd love one of the two answers to help.