Destacar linhas da tabela

Front-end

15/01/2013

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.
Rachel Andrade

Rachel Andrade

Curtidas 0

Melhor post

Joel Rodrigues

Joel Rodrigues

15/01/2013

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.
GOSTEI 2

Mais Respostas

Joel Rodrigues

Joel Rodrigues

15/01/2013

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

Rachel Andrade

15/01/2013

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.
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

15/01/2013

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.
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

15/01/2013

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.
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

15/01/2013

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.
GOSTEI 0
Rachel Andrade

Rachel Andrade

15/01/2013

Poxa, valeu mesmo. vou testar aqui sim e qualquer coisa eu aviso.
Obrigada.
GOSTEI 0
Rachel Andrade

Rachel Andrade

15/01/2013

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

Joel Rodrigues

15/01/2013

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>
GOSTEI 0
Rachel Andrade

Rachel Andrade

15/01/2013

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?
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

15/01/2013

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.
GOSTEI 0
Rachel Andrade

Rachel Andrade

15/01/2013

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");
});


GOSTEI 0
Joel Rodrigues

Joel Rodrigues

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.
GOSTEI 1
Rachel Andrade

Rachel Andrade

15/01/2013

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.
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

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.
GOSTEI 0
POSTAR