Veremos neste artigo um par de soluções a uma pergunta típica de trabalho com Javascript: mudar a cor à célula de uma tabela dinamicamente e como resposta a ações do usuário. Este exemplo pode ser realizado muito facilmente e ofereceremos um par de soluciones, que podemos aplicar dependendo do caso concreto em que nos encontremos.

A primeira solução que vamos ver é como mudar a cor de uma célula ao passar o mouse por cima. Quando entrarmos com o mouse na célula deve mudar para uma cor e quando sairmos a mudaremos por outra.

O segundo caso que vamos realizar é mudar a cor da célula como resposta a eventos de elementos que estão fora da própria célula. Em concreto, mudaremos a cor de uma célula quando se acione um formulário que está fora das células a mudar.

Mudar a cor de uma célula ao passar o mouse por cima

É um caso muito típico que se pode ver em muitas webs. Este exemplo é bastante simples de fazer com CSS, sem necessidade de escrever nem uma linha de código Javascript, porém, apesar disso o mostraremos aqui.

No exemplo teremos uma tabela com várias células e para cada uma teremos definido o evento onmouseover e onmouseout, para chamar a uma função que se encarregue de mudar a cor quando se entre na célula e quando se saia, respectivamente.

A tabela terá esta forma:

<table width=100>
<tr>
   <td bgcolor="#dddddd" id="celula1" onmouseover="mudar_cor_over(this)" onmouseout="mudar_cor_out(this)">Campo numero 1</td>
</tr>
<tr>
   <td bgcolor="#dddddd" id="celula2" onmouseover="mudar_cor_over(this)" onmouseout="mudar_cor_out(this)">Campo numero 2</td>
</tr>
…
<tr>
   <td bgcolor="#dddddd" id="celula10" onmouseover="mudar_cor_over(this)" onmouseout="mudar_cor_out(this)">Campo numero 10</td>
</tr>
</table>

As funções que se encarregam de alterar a cor recebem por parâmetro a palavra this, que é uma referência à célula onde está o evento. Se estamos no evento da célula 1, this faz referência a essa mesma célula 1. As funções são as seguintes:

function mudar_cor_over(celula){
   celula.style.backgroundColor="#66ff33"
}
function mudar_cor_out(celula){
   celula.style.backgroundColor="#dddddd"
}

Como se pode ver, recebem a célula cuja cor se deseja mudar (que se enviou com a palavra this no manejador do evento). Logo, executam a sentença necessária para mudar a cor.

Mudar a cor de uma célula sem passar a referência this

O segundo caso que havíamos adiantado que íamos fazer, era mudar a cor a uma célula desde outra parte da página. Vimos que, se estamos na mesma célula, podemos enviar uma referência do próprio campo com a palavra this, porém se não estamos codificando um evento da célula, e sim estamos em outro lugar do código da página, não teremos possibilidade de enviar essa simples referência.

Então, nos torna necessário obter a referência da célula por outro mecanismo. Entra em jogo a função de Javascript (que em realidade é um método do objeto document) chamada getElementById(). Esta função recebe o nome de um identificador e devolve uma referência ao elemento que tem esse identificador.

Atribui-se identificadores aos elementos de HTML com o atributo id. Desta maneira:

<td id="celula1">

Podemos ver no código da tabela, escrito linhas acima, que cada célula tem um identificador definido. Utilizaremos esse identificador para obter a referência à célula que desejamos alterar sua cor.

Por exemplo, se quisermos obter uma referência à célula com identificador "celula1", utilizaríamos a chamada a essa função assim:

celula = document.getElementById("celula1")

Logo, com a referência da célula, podemos mudar a cor como vimos antes:

celula.style.backgroundColor="#dddddd"

Em nosso exemplo para ilustrar este método criamos um formulário com dois campos de texto e um botão. No primeiro campo de texto escreveremos o número da célula cuja cor queremos mudar. No segundo, escreveremos o nome da cor que queremos colocar ao campo, ou seu código RGB. Quando apertarmos ao botão, chamaremos a uma função que se encarregará de mudar a cor da célula.

O formulário terá um código como este:

<form name=fcolor>
Numero de celula: <input type=text name=celula size=3>
<br>
Cor: <input type=text name=minhacor size=8>
<br>
<input type=button value="Mudar cor" onclick="muda_cor()">
</form>

E a função javascript que se encarregará de mudar a cor terá este código:

function muda_cor(){
   celula = document.getElementById("celula" + document.fcolor.celula.value)
   celula.style.backgroundColor=document.fcolor.minhacor.value
}

Como se pode ver, para obter a referência utilizamos a função document.getElementById() e passamos o id da célula que queremos mudar sua cor. O identificador da célula se compõe pela palavra "celula" e o número da célula, que tiramos do formulário.

Logo, se coloca na célula a cor que se tira do outro campo do formulário.