Ir para conteúdo
Fórum Script Brasil
  • 0

Link em uma <tr>

Guest --Guilherme --

Perguntado por Guest --Guilherme --,

 Share

Pergunta

Guest --Guilherme --

Guest --Guilherme --

Postado
Postado (editado)

Po pessoal, sou novo nessa área.... gostaria de verdade q alguém me ajudasse...

eu gostaria de colocar uma <tr> de uma tabela como link... p/ fazer com q ela tenha um a:hover para eu colocar uma corzinha...

por exemplo:

<table>
<tr>
<td>coluna 1</td>
<td>coluna 2</td>
<td>coluna 3</td>
<td>coluna 4</td>
</tr>
<tr>
<td>coluna 1</td>
<td>coluna 2</td>
<td>coluna 3</td>
<td>coluna 4</td>
</tr>
<tr>
<td>coluna 1</td>
<td>coluna 2</td>
<td>coluna 3</td>
<td>coluna 4</td>
</tr>

gostaria q ficasse verde quando eu passar o mouse em cada linha (ou seja, cada <tr>).

me ajudem , por favor!!!

Editado por flavio
Usar tag CODE facilita a visualização do código!
Link para o comentário
Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

  • 0
Guest --Guilherme --

Guest --Guilherme --

Postado
Postado
Ae Guilherme,

Vamos por partes, ok? Você quer apenas criar o efeito de cor? Ou quer "associar um link à linha da tabela"?

Se for a primeira opção, veja este tutorial: http://www.maujor.com/tutorial/menu_vert.php

Primeiramente, muito obrigado por responder-me!!

Eu quero as duas coisas... quero o efeito de cor e também quero associar link...

Eu vi este tutorial, consegui fazer... sendo q tem outras colunas nesta tabela q contém gif (criei uma classe pra cada gif)

tipo assim:

<tr>

<td class="mtipo_cel"></td>

<td class="mmsg">TEXTO AQUI TEXTO AQUI TEXTO AQUI TEXTO AQUI TEXTO AQUI TEXTO AQUI </td>

<td class="mnome">Eu</td>

<td class="mestado">SP</td>

<td class="mlixo"></td>

<td class="menvia"></td>

<td class="mprint"></td>

</tr>

Em cada classe (mtipo_cel, mlixo, menvia, mprint) contém um gif q fica centralizado na célula...

então, quando eu fui colocar link para as td's as imagens SUMIRAM (aonde tem texto [mmsg, mnome, mestado, ficou blzzz!!!])

fiz assim:

<tr>

<td><a href="#" class="mtipo_cel"></a></td>

<td><a href="#" class="mmsg">TEXTO AQUI TEXTO AQUI TEXTO AQUI TEXTO AQUI</a></td>

<td><a href="#" class="mnome">eu mesmo</a></td>

<td><a href="#" class="mestado">RJ</a></td>

<td><a href="#" class="mlixo"></a></td>

<td><a href="#" class="menvia"></a></td>

<td><a href="#" class="mprint"></a></td>

</tr>

queria saber como faço pra os gifs não sumirem....

Recaptulando.... eu quero q TODA A <TR> (TODA A LINHAA) possua efeito de cor quando o mouse é passado em cima dela...

Espero pelas respostas.... Muito obrigado mais uma vez!!

Um aBRAÇO!

Link para o comentário
Compartilhar em outros sites
  • 0
sabino

sabino

Postado
Postado

Fala pessoal,

Guilherme, para fazer com que a TR funcione como um link, basta usar o onclick, por exemplo:

...
<script language='javascript' type='text/javascript>
   function minhaFuncao()
   {
        window.location.href='minhaURL.html';
   }
</script>
...
<tr onclick='minhaFuncao();'>...</tr>
Se quisermos fazer alguma coisa quando o mouse está sobre a TR, então utilizamos o evento onmouseover em conjunto com o onmouseout (para voltar ao estado original)... 
...
<script language='javascript' type='text/javascript>

   function minhaFuncaoOnMouseOver(objTR)
   {
        objTR.style.color='#DDDDDD';
   }

   function minhaFuncaoOnMouseOut(objTR)
   {
        objTR.style.color='#FFFFFF';
   }

   function minhaFuncaoOnClick()
   {
        window.location.href='minhaURL.html';
   }
</script>
...
<tr onClick='return minhaFuncaoOnClick();' onMouseOver='return minhaFuncaoOnMouseOver(this);' onMouseOut='return minhaFuncaoOnMouseOut(this);'>...</tr>
Agora um exemplo concreto... 
<html>
    <head>
        <script language='javascript' type='text/javascript'>

           function minhaFuncaoOnMouseOver(objTR)
           {
              objTR.style.background='#DDDDDD';
           }

           function minhaFuncaoOnMouseOut(objTR)
           {
              objTR.style.background='#FFFFFF';
           }

           function minhaFuncaoOnClick()
           {
              window.location.href='minhaURL.html';
           }
           
        </script>    
    </head>
    <body>
        <table border='1' cellspacing='0' width='100%'>
            <tr onClick='return minhaFuncaoOnClick();' 
                onMouseOver='return minhaFuncaoOnMouseOver(this);' 
                onMouseOut='return minhaFuncaoOnMouseOut(this);'
            >
                <td>
                    conteúdo da tr...
                </td>
            </tr>
        </table>
    
    </body>
</html>

Espero que isso ajude!

[]'s a todos!

Link para o comentário
Compartilhar em outros sites
  • 0
Ricardo Amancio

Ricardo Amancio

Postado
Postado

caro sabino, como eu não sei muito de js e coisa e tal tá aqui um exemplo com css, já que " :hover" não serve só pra tag <a>...rs...

você pode fazer quase tudo com css, se você nomear as <td> você pode aplicar um formato pra cada uma... não sei quem usaria isso mas você pode...

veja abaixo como eu fiz...

o css que formata a linha:

<style>
tr:hover {
  background-color: red;
  color: white;
}
</style>
a tabela: 
<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td>coluna 1</td>
      <td>coluna 2</td>
      <td>coluna 3</td>
      <td>coluna 4</td>
    </tr>
    <tr>
      <td>coluna 1</td>
      <td>coluna 2</td>
      <td>coluna 3</td>
      <td>coluna 4</td>
    </tr>
    <tr>
      <td>coluna 1</td>
      <td>coluna 2</td>
      <td>coluna 3</td>
      <td>coluna 4</td>
    </tr>
  </tbody>
</table>

espero ter te ajudado...

sucesso...

Link para o comentário
Compartilhar em outros sites
  • 0
Guest --Guilherme --

Guest --Guilherme --

Postado
Postado

Valeuuu galera.... a dica de vocês dois me ajudaram muitoo..... obrigado mesmo!!1

RICARDO, eu não sabia q podia usar o hover sem a tag <a>

o problema é q no ie 6 não pegaa... o ie 6 só aceita hover com <a> ?????

o q posso fazer pro hover funcionar no ie 6 também???

Mais uma vez, obrigado a vocês dois, sABINO E rICARDO!!

VALEUU!!

caro sabino, como eu não sei muito de js e coisa e tal tá aqui um exemplo com css, já que " :hover" não serve só pra tag <a>...rs...

você pode fazer quase tudo com css, se você nomear as <td> você pode aplicar um formato pra cada uma... não sei quem usaria isso mas você pode...

veja abaixo como eu fiz...

o css que formata a linha:

<style>
tr:hover {
  background-color: red;
  color: white;
}
</style>
a tabela: 
<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td>coluna 1</td>
      <td>coluna 2</td>
      <td>coluna 3</td>
      <td>coluna 4</td>
    </tr>
    <tr>
      <td>coluna 1</td>
      <td>coluna 2</td>
      <td>coluna 3</td>
      <td>coluna 4</td>
    </tr>
    <tr>
      <td>coluna 1</td>
      <td>coluna 2</td>
      <td>coluna 3</td>
      <td>coluna 4</td>
    </tr>
  </tbody>
</table>

espero ter te ajudado...

sucesso...

Link para o comentário
Compartilhar em outros sites
  • 0
Ricardo Amancio

Ricardo Amancio

Postado
Postado

Cara usei onmouse....

Testa ae....

<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr onmouseover="this.style.background='#006600';this.style.color='#ffffff';" onmouseout="this.style.background='';this.style.color='';">
      <td>coluna 1</td>
      <td>coluna 2</td>
      <td>coluna 3</td>
      <td>coluna 4</td>
    </tr>
    <tr onmouseover="this.style.background='#006600';this.style.color='#ffffff';" onmouseout="this.style.background='';this.style.color='';">
      <td>coluna 1</td>
      <td>coluna 2</td>
      <td>coluna 3</td>
      <td>coluna 4</td>
    </tr>
    <tr onmouseover="this.style.background='#006600';this.style.color='#ffffff';" onmouseout="this.style.background='';this.style.color='';">
      <td>coluna 1</td>
      <td>coluna 2</td>
      <td>coluna 3</td>
      <td>coluna 4</td>
    </tr>
  </tbody>
</table>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...