Change cell color of a table by changing the backgroud and the text to be displayed

Question

Good morning to you all! Gentlemen, I have a table where I upload information from the database, and I display it in this table. The table is already ready and loading the data right. What I need is to change the backgroud color of one of these cells by taking into account a condition, which is the following: If the information I have is equal to’S' it will change the text to 'Hit' and backgroud to blue for example, if it is not the same, change the text to 'Error' and backgroud to redness.

I’ve tried to do it this way:

function status(){
   var status = document.getElementById("idcampostatus").value;
   if(status == "S"){
      //status.value = "Acerto";
      status.style.backgroundColor="#428bca" 
   }else{
      //status = "Erro";
      status.style.backgroundColor="#d9534f";
   }
}

But I don’t know if this function is really right, nor how to call in the table_(cell)_, because it’s not a clickable element, and I don’t know if the onLoand() works on a table. From now on I thank everyone for their help!

Answer 1

Your code is almost right when you do

var status = document.getElementById("idcampostatus").value;

you are putting in the variable a string, that is the very value that the element has at the moment. And not the element itself as you expect to have in

status.style.backgroundColor = etc...

So you must do

var status = document.getElementById("idcampostatus")

Notes further that .value is a property that inputs have, for example, but not elements of an HTML table like td. Although that is the element you want to know the content Tavlez is better with .innerHTML.

I would change your function to:

function status(id, certo, erro){
   var status = document.getElementById(id);
   if(status.value == "S"){
      //status.value = "Acerto";
      status.style.backgroundColor = certo;
   }else{
      //status = "Erro";
      status.style.backgroundColor = erro;
   }
}

and then wore:

status('idcampostatus', '#428bca', '#d9534f');

this way write code that you can re-use in other elements, calling the function with new values.

Having said that... I think the solution, in fact, must be another:

I think if you fill the table in PHP it is much better to do this in PHP. So avoid strange effects like FOUC.

You can do this with CSS classes by reading the element class and assigning the consonant class.

In this case in the CSS:

.azul { background-color: #428bca;}
.vermelho { background-color: #d9534f;}

and in PHP when you generate HTML:

$classe = $conteudo == 'S' ? 'azul' : 'vermelho';
echo '<td class="'.$classe.'">'.$conteudo.'</td>';

Answer 2

For a more complete answer, it would be good if the html structure is available.

To call the function add to the location where you will click onClick(status()) or through Jquery:

$('class or id').click(function(){
  var status = $('.idcampostatus')
  if(status.val() or text() == 'S')
      status.css('backgroundColor','#428bca');
  else
     status.css('backgroundColor','#d9534f');    
}