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

Question

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

Navigation

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

3

Good morning everyone! Gentlemen, it is as follows: I have a table where I load information from the database, and display it on that table. The table is ready and loading the data right. What I need is to change the color of the backgroud of one of these cells taking into account a condition, which is as follows: If the information I have is equal to 'S' it will change the text to 'Hit' and the backgroud to blue for example, if it is not equal, change the text to 'Error' and backgroud to red.

I have tried to do this as follows:

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 do not know if this function is really right, nor how to call table_ (cell) _, because it is not a clickable element, and I do not know if onLoand() works on a table. Thanks in advance for all your help!

php javascript css

asked by anonymous 23.10.2015 / 16:05

2 answers

1

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

To call the function adds 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');    
}

23.10.2015 / 16:24

How to change the "src" of an iframe without changing the user's URL? Generate an array in function of another without bottlenecks

score 3 · Accepted Answer

Your code is almost right, when you do

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

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

status.style.backgroundColor = etc...

So you must do

var status = document.getElementById("idcampostatus")

Note also that .value is a property that inputs have, for example, but not elements of an HTML table as td . If this is the element you want to know the tavlez content is best with .innerHTML .

I would change your role 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 used:

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

In this way you write code that you can reuse in other elements, calling the function with new values.

Having said this ... I think the solution, in fact, should be another:

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

You can do with CSS classes by reading the element class and assigning the class to it.

In this case in 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>';