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

Asked

Viewed 1,231 times

4

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!

php javascript css

  • @Rafael Acioly think that removing the tag PHP it’s not right, I put it back together.

  • @Sergio José’s doubt relates to CSS training using JS, as he said at the beginning of the post "A tabela já está pronta e carregando os dados direitinho." there is no doubt regarding PHP in this post.

  • @Rafaelacioly but if it mounts this in PHP, to add a class to a static element is better to do this in PHP than in Javascript. Apart from that he himself joined the tag.

  • 1

    Clarifying, I put the php tag just to let you know that the project is being done in php. If by chance, the best solution is in php, I will use it because it is already working with php.

2 answers

3


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>';
  • 1

    Thank you so much for the help. I didn’t do exactly as you informed me, but it helped a lot. I solved it using php itself. Like building my table at runtime, that is, save what comes from the bank in an array, play in a loop and distribute to the table, I created an if() outside and print the line by calling and designating a class created directly in css. I’m grateful for your attention and help!

  • @Joséallison good! I’m glad I helped.

1

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');    
}

Browser other questions tagged php javascript css

You are not signed in. Login or sign up in order to post.