Destacar linhas da tabela

15/01/2013

3

Oi, gente...
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.
Responder

Post mais votado

15/01/2013

É o seguinte:

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.
Responder

Mais Posts

15/01/2013

Joel Rodrigues

Olá, Rachel.
Você poderia postar os estilos que você precisa aplicar às linhas em destaque? Assim já facilita pra te dar um exemplo.
Responder

15/01/2013

Rachel Andrade

Então, os estilos que preciso aplicar são os seguintes:

Para a linha quando o mouse passa sobre:
background-color:#98FB98;


Para a linha quando for clicada:
background-color:#7CFC00;
font-weight:bold;


Grata.
Responder

15/01/2013

Joel Rodrigues

Vamos lá. Para começar crie duas classes com as configurações que você passou:

.linhaHover{
background-color:#98FB98;
}


.linhaSelecionada{
background-color:#7CFC00;
font-weight:bold;
}


Elas serão usadas mais adiante.
Responder

15/01/2013

Joel Rodrigues

Você já usa jQuery? Se não, faça referência a essa biblioteca, da seguinte forma:

<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.
Responder

15/01/2013

Joel Rodrigues

Tendo seguido os dois passos anteriores, adicione um script (também no cabeçalho da página ou em um arquivo externo), conforme o código abaixo:

$(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.
Responder

15/01/2013

Rachel Andrade

Poxa, valeu mesmo. vou testar aqui sim e qualquer coisa eu aviso.
Obrigada.
Responder

15/01/2013

Rachel Andrade

Desculpe a pergunta, mas esse segundo código fica em outra tag script? Não é junto do link da jQuery, né?
Responder

15/01/2013

Joel Rodrigues

Exatamente, você pode fazer assim:
    <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>
Responder

15/01/2013

Rachel Andrade

Agora sim, deu certo. Muito obrigada.
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?
Responder

15/01/2013

Joel Rodrigues

Na verdade você precisa dar um id ou uma classe para a tabela que você quer que tenha os efeitos. E lá no filtro da jQuery você faz, por exemplo:
$("#minhaTabela tr").hover....

ou 

$(".minhaTabela tr").hover....



Eu sugiro usar uma classe, pois você poderá reutilizar em várias tabelas.

Boa sorte.
Responder

15/01/2013

Rachel Andrade

Isso mesmo! Agora foi... rsrsrs
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");
});


Responder

15/01/2013

Rachel Andrade

Perfeito, entendi o funcionamento. Assim fica mais fácil de eu mesma fazer nas próximas vezes ou no mínimo ter menos dificuldade.

Muito obrigada e podem encerrar o tópico.
Responder

15/01/2013

Joel Rodrigues

Que bom que deu certo e que você entendeu o funcionamento, isso é realmente importante. Não basta copiar e colar os códigos que encontramos por aí, pois sempre ficaremos dependentes de pesquisar novamente, copiar e colar.

Nesse caso, estou encerrando o tópico.
Responder