24 replies to this topic

[Fernando Wobeto]

Olá pessoal,

alguem tem ou pode fazer um scriptzinho para quando a pessoa clicar em um "td" de uma tabela ela mude de cor (seleciona)? E tipo assim, que quando ela clique novamente, volte para a cor antiga (tirar a seleção).

E que possa ser feito com mais de um td essa seleção.


Obrigado pela ajuda

[tiraduvidas]

a chamada pelo onClick eu conheço, agora a retirada só conheço no onMouseOver, segue abaixo um exemplo:

<style type=text/css>
.celula {font-weight:bold;font-family:verdana;font-size: 10px;cursor: hand;padding-left:5px;border: 1px solid #FFFFFF;}
.celhover {font-weight:bold;font-family: verdana; font-size: 10px; border: 1px #000000 dotted; padding-left: 5px; background-color: #f8f8f8;}
</style>

<table width="10%" border="0" cellspacing="1" cellpadding="1" style="border:1px solid #f1f1f1;">
<tr> 
<td class="celula" onClick="this.className='celhover'" onmouseout="this.className='celula'"><a href="pagina.html"><font style="text-decoration:none;color:#66a6e5;">link</a></td>
</tr>
</table>

[Fernando Wobeto]

amigo, seu codigo funciona quando eu clico no tr, mas a cor nao permanece quando tiro o mouse de cima do tr.


Té mais

[tiraduvidas]

é só tirar isso do td:

onmouseout="this.className='celula'"

[Fernando Wobeto]

é só tirar isso do td:

onmouseout="this.className='celula'"

Realmente,


agora deu, só falta saber como fazer para quando clicar, ele desaparecer aquela cor de fundo e voltar para a original

Obrigado por enquanto!

[Without a Nick]

use o onclick....

[tiraduvidas]

você não deve ter lido o tópico, o onClick já foi usado para chamar a função de troca de cor, não pode ser usado duas vezes no mesmo botão.

[Without a Nick]

Então crie uma função no qual tenha dois valores pré-definidos.

Nessa função, você pode criar uma variável que irá mudar a cada vez, fazendo com que uma função seja executada.

[tiraduvidas]

o problema é criar essa função, manda ver aí...

[Fernando Wobeto]

Então crie uma função no qual tenha dois valores pré-definidos.

Nessa função, você pode criar uma variável que irá mudar a cada vez, fazendo com que uma função seja executada.

NOssa

e como faço isso Without a Nick?

Veja o código que já tenho, que muda de cor ao ser clicado uma vez:

<style type=text/css>
.celula {font-weight:bold;font-family:verdana;font-size: 10px;cursor: hand;padding-left:5px;border: 1px solid #FFFFFF;}
.celhover {font-weight:bold;font-family: verdana; font-size: 10px; border: 1px #000000 dotted; padding-left: 5px; background-color: #f8f8f8;}
</style>

<table width="50%" border="1" cellspacing="1" cellpadding="1" style="border:1px solid #f1f1f1;">
<tr> 
<td class="celula" onClick="this.className='celhover'"><font style="text-decoration:none;color:#66a6e5;">Teste para ver a cor do fundo mudar quando clicar na celula</td>
</tr>
</table>

Valeu

[Alex Hiroshi]

use o onclick mesmo, como o sem nick falou.. ai vc ve qual a cor que esta como fundo.. se for a cor X.. vc muda pra cor Y .. se for Y vc muda pra X

<script>
function mudacor(){
if(document.getElementById("celula").style.background== "#ff0000"){
document.getElementById("celula").style.background="#0000ff";
}
else {
document.getElementById("celula").style.background="#ff0000";
}
}
</script>

<table style="border: 1px solid #c0c0c0;">
<tr>
<td id="celula" onclick="mudacor()"> Vai mudar!! =)  </td>
</tr>
</table>

[Fernando Wobeto]

use o onclick mesmo, como o sem nick falou.. ai vc ve qual a cor que esta como fundo.. se for a cor X.. vc muda pra cor Y .. se for Y vc muda pra X

<script>
function mudacor(){
if(document.getElementById("celula").style.background== "#ff0000"){
document.getElementById("celula").style.background="#0000ff";
}
else {
document.getElementById("celula").style.background="#ff0000";
}
}
</script>

<table style="border: 1px solid #c0c0c0;">
<tr>
<td id="celula" onclick="mudacor()"> Vai mudar!! =)  </td>
</tr>
</table>

Tá louco ,

é por isso que eu gosto dessa galera ai

Valeu gente....funcionou!!!

Edição feita por: Fernando Wobeto, 15/11/2004, 06:36.

[Fernando Wobeto]

Éhhh...

surgiu um problema ai galera...

Testem esse código abaixo:

<script>
function mudacor(){
if(document.getElementById("celula").style.background== "#f8f8f8"){
document.getElementById("celula").style.background="#ffffff";
}
else {
document.getElementById("celula").style.background="#f8f8f8";
}
}
</script>

<table width="50%" cellspacing="1" cellpadding="1" style="border:1px solid #f1f1f1;">
<tr>
<td id="celula" onclick="mudacor()"><font size="2">Teste para mudar a cor do 

fundo</font></td>
</tr>
<tr>
<td id="celula" onclick="mudacor()"><font size="2">Aqui mostra que funciona e muda a 

cor</font></td>
</tr>
<tr>
<td id="celula" onclick="mudacor()"><font size="2">Aqui tá funcionando para poder mudar a 

cor do fundo</font></td>
</tr>
</table>

Quando vc clica no primeiro td ele muda de cor e vc clica nele novamente e volta a cor original como eu queria e talz.

Só que o segundo td em diante, nao funciona, e acaba fazendo a ação com o primeiro mesmo clicando nos seguintes.

Como podemos resolver esse problema?

[Alex Hiroshi]

vc nao pode usar dois ids iguais na msm pagina

[Fernando Wobeto]

vc nao pode usar dois ids iguais na msm pagina

e xxALExx,

como eu poderia fazer funcionar com mais tds??

Isso teria que ser uma listagem com varios tds e teria q funcionar para cada um

Valeu