Seletores no Jquery - ao clicar
09/11/2015
0
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:
Se possível seja mais assertiva no objetivo, pois facilita muito a ajuda.
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
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
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.
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
Clique aqui para fazer login e interagir na Comunidade :)
