Jump to content


Photo

Ao Clicar, Mudar A Cor Do Backcolor De Um Td


  • Faça o login para participar
21 replies to this topic

#1 Fernando Wobeto

Fernando Wobeto

    webmaster

  • Usuários
  • 341 posts
  • Sexo:Masculino

Posted 13/11/2004, 19:54

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 (y)
|--------------------------------------------------|
| MSN: fernando_wobeto@hotmail.com
| E-MAIL: fernandowobeto@gmail.com
| Desenvolvedor Web
|--------------------------------------------------|

#2 tiraduvidas

tiraduvidas

    12 Horas

  • Usuários
  • 149 posts
  • Sexo:Não informado

Posted 13/11/2004, 20:17

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>


#3 Fernando Wobeto

Fernando Wobeto

    webmaster

  • Usuários
  • 341 posts
  • Sexo:Masculino

Posted 13/11/2004, 21:25

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


Té mais :huh:
|--------------------------------------------------|
| MSN: fernando_wobeto@hotmail.com
| E-MAIL: fernandowobeto@gmail.com
| Desenvolvedor Web
|--------------------------------------------------|

#4 tiraduvidas

tiraduvidas

    12 Horas

  • Usuários
  • 149 posts
  • Sexo:Não informado

Posted 13/11/2004, 21:32

é só tirar isso do td:

onmouseout="this.className='celula'"

#5 Fernando Wobeto

Fernando Wobeto

    webmaster

  • Usuários
  • 341 posts
  • Sexo:Masculino

Posted 13/11/2004, 21:38

é 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 :blink:

Obrigado por enquanto! (y)
|--------------------------------------------------|
| MSN: fernando_wobeto@hotmail.com
| E-MAIL: fernandowobeto@gmail.com
| Desenvolvedor Web
|--------------------------------------------------|

#6 Without a Nick

Without a Nick

    Sem culpa no cartório

  • Usuários
  • 2378 posts
  • Sexo:Não informado
  • Localidade:Guarulhos

Posted 14/11/2004, 12:51

use o onclick....

#7 tiraduvidas

tiraduvidas

    12 Horas

  • Usuários
  • 149 posts
  • Sexo:Não informado

Posted 14/11/2004, 12:55

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.

#8 Without a Nick

Without a Nick

    Sem culpa no cartório

  • Usuários
  • 2378 posts
  • Sexo:Não informado
  • Localidade:Guarulhos

Posted 14/11/2004, 13:01

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.

#9 tiraduvidas

tiraduvidas

    12 Horas

  • Usuários
  • 149 posts
  • Sexo:Não informado

Posted 14/11/2004, 13:08

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

#10 Fernando Wobeto

Fernando Wobeto

    webmaster

  • Usuários
  • 341 posts
  • Sexo:Masculino

Posted 14/11/2004, 13:09

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 :wacko:

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
|--------------------------------------------------|
| MSN: fernando_wobeto@hotmail.com
| E-MAIL: fernandowobeto@gmail.com
| Desenvolvedor Web
|--------------------------------------------------|

#11 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 15/11/2004, 05:52

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 :P
<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>

Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#12 Fernando Wobeto

Fernando Wobeto

    webmaster

  • Usuários
  • 341 posts
  • Sexo:Masculino

Posted 15/11/2004, 06:36

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 :P

<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 :o ,

é por isso que eu gosto dessa galera ai :D

Valeu gente....funcionou!!! (y)

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

|--------------------------------------------------|
| MSN: fernando_wobeto@hotmail.com
| E-MAIL: fernandowobeto@gmail.com
| Desenvolvedor Web
|--------------------------------------------------|

#13 Fernando Wobeto

Fernando Wobeto

    webmaster

  • Usuários
  • 341 posts
  • Sexo:Masculino

Posted 15/11/2004, 06:46

É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? :blink:
|--------------------------------------------------|
| MSN: fernando_wobeto@hotmail.com
| E-MAIL: fernandowobeto@gmail.com
| Desenvolvedor Web
|--------------------------------------------------|

#14 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 15/11/2004, 06:52

vc nao pode usar dois ids iguais na msm pagina
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#15 Fernando Wobeto

Fernando Wobeto

    webmaster

  • Usuários
  • 341 posts
  • Sexo:Masculino

Posted 15/11/2004, 07:20

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 (y)
|--------------------------------------------------|
| MSN: fernando_wobeto@hotmail.com
| E-MAIL: fernandowobeto@gmail.com
| Desenvolvedor Web
|--------------------------------------------------|




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq