4

Bom dia a todos! Senhores, é o seguinte: Tenho uma tabela onde carrego informações do banco de dados, e exibo nessa tabela. A tabela já está pronta e carregando os dados direitinho. O que eu preciso é mudar a cor do backgroud de uma dessas células levando em conta uma condição, que é a seguinte: Se a informação que tenho for igual a 'S' ele vai mudar o texto para 'Acertou' e o backgroud pra azul por exemplo, se não for igual, muda o texto pra 'Erro' e o backgroud para vermelhor.

Já tentei fazer da seguinte forma:

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";
   }
}

Mas não sei se essa função está realmente certa, e nem como chamar na tabela_(célula)_, porque não é um elemento clicável, e não sei se o onLoand() funciona numa tabela. Desde já agradeço a a ajuda de todos!

4
  • @Rafael Acioly acho que remover a tag PHP não é correto, voltei a juntar.
    – Sergio
    23/10/2015 às 14:52
  • @Sergio a duvida do José é referente a formação CSS usando JS, como o mesmo já disse no começo do post "A tabela já está pronta e carregando os dados direitinho." não existe duvidas referente a PHP neste post.
    – RFL
    23/10/2015 às 15:15
  • @RafaelAcioly mas se ele monta isso no PHP, para juntar uma classe a um elemento estático é melhor fazer isso no PHP que no JavaScript. Para além de que ele próprio juntou a tag.
    – Sergio
    23/10/2015 às 15:20
  • 1
    Esclarecendo, coloquei a tag php justamente pra deixar informado que o projeto ta sendo feito em php. Se por acaso, a melhor solução seja em php, usarei ela pelo fato de já esta trabalhando com php. 23/10/2015 às 17:34

2 Respostas 2

3

O teu código está quase certo, quando fazes

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

estás a colocar na variável uma string, ou seja o próprio valor que o elemento têm no momento. E não o elemento em sí como esperas ter em

status.style.backgroundColor = etc...

Assim deves fazer

var status = document.getElementById("idcampostatus")

Repara ainda que .value é uma propriedade que inputs têm, por exemplo, mas não elementos de uma tabela de HTML como td. Cado seja esse o elemento que queiras saber o conteúdo tavlez seja melhor com .innerHTML.

Eu mudaria a tua função para:

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

e depois usava:

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

dessa maneira escreves código que podes re-utilizar em outros elementos, chamando a função com valores novos.

Tendo dito isso... acho que a solução, na verdade, deve ser outra:

Acho que se preenches a tabela no PHP é muito melhor fazer isso no PHP. Assim evitas efeitos estranhos como FOUC.

Podes fazer com classes de CSS, lendo a classe do elemento e atribuindo a classe consoante.

Nesse caso no CSS:

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

e no PHP quando geras o HTML:

$classe = $conteudo == 'S' ? 'azul' : 'vermelho';
echo '<td class="'.$classe.'">'.$conteudo.'</td>';
2
  • 1
    Muito obrigado pela ajuda. Não fiz exatamente como você me informou, mas ajudou bastante. Resolvi usando php mesmo. Como construindo minha tabela em tempo de execução, ou seja, salvo o que vem do banco num array, jogo num laço e distribuo pra tabela, criei um if() fora e imprimir a linha chamando e designando uma classe criada diretamente no css. Fico grato pela atenção e ajuda! 23/10/2015 às 18:42
  • @JoséAllison boa! fico contente de ter ajudado.
    – Sergio
    23/10/2015 às 18:45
1

Para uma resposta mais completa, seria bom se disponibiliza-se a estrutura do html.

Para chamar a função adiciona ao local onde vai clicar onClick(status()) ou atravês de Jquery:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .