Destacar linhas da tabela
15/01/2013
0
estou tentando fazer uma tabela HTML com os seguintes efeitos:
1) ao passar o mouse sobre uma linha, essa fica destacada das demais.
2) ao clicar sobre uma linha, destacá-la de forma fixa, até que outra seja selecionada.
Já até tenho os estilos que preciso aplicar, mas só sei fazer isso usando o :hover em links. Em tags TR não funciona.
Alguém já fez algo parecido e pode compartilhar?
Desde já, muito obrigada.
Rachel Andrade
Post mais votado
15/01/2013
Na primeira linha foi usado o filtro "tr" para que o comando se aplicasse a todas as linhas (tr) da tabela. Ou seja, todas as linhas que tivessem a classe linhaSelecionada deveriam perder essa classe para voltar ao estado inicial. Na verdade só deverá haver uma linha com essa classe, pois só se pode selecionar uma linha por vez, mas como não sabemos qual linha está selecionada, aplicamos o comando em todas.
No segundo caso, só era preciso adicionar a classe linhaSelecionada àquela linha que estava sendo clicada. Por isso foi utilizada a palavra reservada this, que faz referência ao elemento que disparou o evento, no caso, a tag tr que foi clicada.
Espero ter esclarecido, caso tenha permanecido alguma dúvida, sinta-se à vontade para questionar.
Joel Rodrigues
Mais Posts
15/01/2013
Joel Rodrigues
Você poderia postar os estilos que você precisa aplicar às linhas em destaque? Assim já facilita pra te dar um exemplo.
15/01/2013
Rachel Andrade
Para a linha quando o mouse passa sobre:
background-color:#98FB98;
Para a linha quando for clicada:
background-color:#7CFC00; font-weight:bold;
Grata.
15/01/2013
Joel Rodrigues
.linhaHover{ background-color:#98FB98; }
.linhaSelecionada{ background-color:#7CFC00; font-weight:bold; }
Elas serão usadas mais adiante.
15/01/2013
Joel Rodrigues
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
Isso dentro das tags <head> e </head> da sua página.
15/01/2013
Joel Rodrigues
$(function(){ $("tr").hover( function(){$(this).addClass("linhaHover");}, function(){$(this).removeClass("linhaHover");}, ); $("tr").click(function(){ $("tr").removeClass("linhaSelecionada"); $(this).addClass("linhaSelecionada"); }); });
Bem, não pude testar aqui. Veja se dá certo.
Boa sorte.
15/01/2013
Rachel Andrade
Obrigada.
15/01/2013
Rachel Andrade
15/01/2013
Joel Rodrigues
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script> <script type="text/javascript"> $(function(){ alert("oi"); $("tr").hover( function(){$(this).addClass("linhaHover");}, function(){$(this).removeClass("linhaHover");} ); $("tr").click(function(){ $("tr").removeClass("linhaSelecionada"); $(this).addClass("linhaSelecionada"); }); }); </script>
15/01/2013
Rachel Andrade
Só uma dúvida: eu tenho outra tabela na página onde eu não queria que acontecessem esses efeitos, nesse caso eu teria que botar "table tr" dentro do filtro?
15/01/2013
Joel Rodrigues
$("#minhaTabela tr").hover.... ou $(".minhaTabela tr").hover....
Eu sugiro usar uma classe, pois você poderá reutilizar em várias tabelas.
Boa sorte.
15/01/2013
Rachel Andrade
Sem querer incomodar, me tira só uma dúvida, por que no seguinte trecho você usou $("tr") numa linha e $(this) na outra:
$("tr").click(function(){ $("tr").removeClass("linhaSelecionada"); $(this).addClass("linhaSelecionada"); });
15/01/2013
Rachel Andrade
Muito obrigada e podem encerrar o tópico.
15/01/2013
Joel Rodrigues
Nesse caso, estou encerrando o tópico.
Clique aqui para fazer login e interagir na Comunidade :)