1

HTML

<tr class="linha">
 <td class="tipoMov">Receita</td>
 <td>Corte de cabelo</td>
 <td>R$20,00</td>
</tr>

Javascript

window.onload = function(){
 if(document.getElementsByClassName("tipoMov").innerHTML == 'Receita'){
   document.getElementsByClassName("linha").style.backgroundColor = "#90EE90";
 }
}

O que eu preciso é alterar o background-color da tag "tr" conforme o que estiver na tag "td" com classe "tipoMov".

Quando eu coloco o getElementById ao invés de getElementsByClassName funciona, porém eu tenho várias linhas, então não daria para usar o ID, preciso usar class.

2 Respostas 2

1

É basicamente como o amigo falou na outra resposta, mas você pode fazer de oura forma usando querySelector(".tipoMov"). Ao percorrer cada linha da tabela, o querySelector irá buscar o elemento com a classe .tipoMov e pegar o texto dentro dele e comparar se é igual a Receita. Se for igual, aplicará a cor de fundo:

const linha = document.getElementsByClassName("linha");
for(let i of linha){
   if(i.querySelector(".tipoMov").textContent.trim() == "Receita"){
      i.style.backgroundColor = "#90EE90";
   }
}
<table border="1">
<tr class="linha">
 <td class="tipoMov">Receita</td>
 <td>Corte de cabelo</td>
 <td>R$20,00</td>
</tr>
<tr class="linha">
 <td class="tipoMov">Outra coisa</td>
 <td>Corte de cabelo</td>
 <td>R$20,00</td>
</tr>
<tr class="linha">
 <td class="tipoMov">Receita</td>
 <td>Corte de cabelo</td>
 <td>R$20,00</td>
</tr>
</table>

Veja que utilizei .trim() para eliminar possíveis espaços nas bordas do texto. Isso porque se você indentar o texto dentro da td, o texto irá retornar com espaços antes e depois dele.

Por exemplo, se você fizer assim:

<td class="tipoMov">
   Receita
</td>

A palavra Receita virá com espaços, porque o HTML considera novas linhas como um espaço em branco.

1

A função getElementsByClassName retorna vários resultados enquanto o getElementById retorna apenas um.

Para funcionar com o getElementsByClassName você deve percorrer a lista e alterar item a item.

window.onload = function(){
    const elementosHTML = document.getElementsByClassName("tipoMov")
    for(elemento of elementosHTML) {
        if(elemento.innerHTML == 'Receita'){
            elemento.style.backgroundColor = "#90EE90";
        }
    }
}
1
  • No caso o elemento que eu quero mudar o background é o de classe "linha", dessa forma o background que foi alterado foi o de classe "tipoMov"
    – Luc
    14/09/2019 às 21:31

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 .