É 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.