F�rum Seletores no Jquery - ao clicar #536734

09/11/2015

Como fa�o para gerar uma mudan�a visual quando passar o mouse em cima, estou com esse exemplo abaixo, mas fazer essa op��o no JQuery.


<html>
	<head>
		<title>Entendendo o JQuery</title>
		<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
		<script type="text/javascript">			
			$(document).ready(function() {
				$('tr:not(tr:gt(2))').css('background-color', 'green');
				
			});
		</script>
	</head>
	
	<body>		
		<table border="1" cellpadding="5" cellspacing="0">
			<tr>
				<td>Nome</td>
				<td>Idade</td>
				<td>Endere�o</td>
			</tr>
			<tr>
				<td>Diogo</td>
				<td>24</td>
				<td>R Teste</td>
			</tr>
			<tr>
				<td>Sandra</td>
				<td>45</td>
				<td>R test 2</td>
			</tr>
			<tr>
				<td>Gabriel</td>
				<td>34</td>
				<td>R Gabriel</td>
			</tr>
			<tr>
				<td>Gabriel</td>
				<td>34</td>
				<td>R Gabriel</td>
			</tr>
			<tr>
				<td>Gabriel</td>
				<td>34</td>
				<td>R Gabriel</td>
			</tr>
		</table>
	</body>
<html>

Gabriela Monte

Curtir t�pico

+ 0

Responder

Post mais votado

09/11/2015

Perdoe-me a franqueza, mas me parece que voc� esta misturando v�rio conceitos e deixou o post incompreens�vel.

Afinal voc� quer anipular no click como esta no t�tulo ou ao mover o mouse (hover, mouseover ou mousemove)?

Se for ao passar o mouse sobre um <tr> e alterar a cor de fundo � poss�vel fazer de simplesmente com CSS e nem � preciso usar JQuery:

<style>
#tabela{
width:600px;
height:100px;
text-align:center;
}

.coluna{
width:50px;
height:20px;
}
.coluna:hover{
background-color:#00FF33;
}
</style>

 <table id="tabela" border="1">
  <tr class="coluna">
    <td> </td>
    <td>Cod</td>
    <td>Nome</td>
    <td> Fone </td>
  </tr>
   <tr class="coluna">
    <td>001</td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
   <tr class="coluna">
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
   <tr class="coluna">
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

Se poss�vel seja mais assertiva no objetivo, pois facilita muito a ajuda.

Jothaz

Responder

Gostei + 1

Mais Posts

09/11/2015

Gabriela Monte

Misturei a simplicidade do CSS com a "complexidade" do JQuery, mas j� que o JQuery faz mudan�as nas celulas pensei que poderia existir alguma fun��o.(hover, mouseover ou mousemove).

Responder

Gostei + 0

10/11/2015

Jothaz

Uma das qualidades importante em um profissional de TI � o discernimento para abordar o problema de forma correta com a ferramenta correta. E em TI quanto mais simples uma solu��o melhor. No caso � poss�vel fazer v�rias coisas com jQuery e talvez complicar algo que poder ser feito de forma mais simples. E mesmo que voc� v� usar o jQuery no final para manipular a apar�ncia dos controles voc� vai ter de usar CSS.

Ent�o o exemplo � s� uma forma simples de conseguir alcan�ar o objetivo.

Agora se o objetivo fosse, por exemplo, criar uma forma de trocar a cor de fundo ao clicar em uma linha de uma table <TR>. Seguindo a seguinte regra: se o fundo fosse diferente de verde ficaria verde e se fosse verde ficaria branco, criando um efeito on/off.
Ent�o n�o a melhor solu��o seria o jQuery em conjunto com o CSS.

Responder

Gostei + 0

10/11/2015

Gabriela Monte

Est� bem, obrigada Jothaz.

Responder

Gostei + 0