Jump to content
Fórum Script Brasil
  • 0

Link em uma <tr>


Guest --Guilherme --

Question

Guest --Guilherme --

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!!!

Edited by flavio
Usar tag CODE facilita a visualização do código!
Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
Guest --Guilherme --
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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

  • 0
Guest --Guilherme --

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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152k
    • Total Posts
      651.5k
×
×
  • Create New...