Destacando linhas de tabelas ao passar o mouse
O efeito de destacar linhas de uma tabela consiste em alterar a formatação da linha que recebe o foco. Destacando ela das demais. Dessa forma o visitante do site consegue se localizar mais fácil na tabela, sem ter que passar o dedo na tela para ler as informações de uma linha da tabela.
Nesse primeiro exemplo vamos criar um script que destaque a linha que recebe o foco do mouse.
Para criar esse efeito vamos utilizar o método hover (sobre, fora). Esse método executa duas funções, a primeira quando o mouse passa sobre o seletor e a outra quando o mouse sai de cima do seletor.
Utilizando CSS vamos criar uma classe chamada destaque. Vamos inserir essa classe através de script jQuery. A classe vai funcionar da seguinte forma: quando o usuário põe o mouse sobre a linha a classe é chamada, quando o usuário retira o mouse da linha a classe é removida.
CSS
.destaque{background:#FFFF99;color:#FF0000;}
HTML
<table id="curso">
<caption>Tabela de cursos de graduação</caption>
<thead>
<tr>
<th scope="col">CURSO</th>
<th scope="col">PERÍODO</th>
<th scope="col">CIDADE</th>
<th scope="col">VAGAS</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="6">Estes cursos exigem do aluno prova de habilidades.</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Arquitetura e Urbanismo</td>
<td>diurno</td>
<td>São Paulo</td>
<td>50</td>
</tr>
<tr>
<td>Biblioteconomia</td>
<td>Noturno</td>
<td>Porto Alegre</td>
<td>30</td>
</tr>
... resto da marcação...
</tbody>
</table>
Script jQuery para o efeito
$(function(){
$('table#curso tbody tr').hover(
function(){
$(this).addClass('destaque');
},
function(){
$(this).removeClass('destaque');
}
);
});
- Na linha 2 estamos colocando o efeito hover no elemento selecionado, no caso a linha </tr>.
- Na linha 3 até 5: o que vai aconseter quando o ouse passar sobre a linha, no nosso caso adicionar a classe destaque.
- Na linha5: A virgula depois das chaves indica que terminou a primeira parte do método (lembra? O método hover tem duas funções sobre e fora).
- Na linha 6 até 9: o que deve acontecer quando o mouse sar de cima da linha, no caso, remover a classe destaque. Na linha 9 temos o fim do método hover.
Março 12th, 2009 at 12:11 am
Olá, gostei muito do teu blog e to já li alguns posts. Todos muito bons, parabéns!
Sobre esse, não seria mais fácil utilizar apenas CSS?
tr td {background:#FFF;}
tr:hover td {background:#CCC;}
tá sei que não seria compatível com ie 6, mas todos os browsers atuais já são combátiveis com hover fora dos links.
Abraço, Matheus.
Março 12th, 2009 at 9:34 pm
Matheus, realmente você está certo. É mais fácil com CSS. Com jQuery apenas para pegar navegadores como o IE6. Eu particularmente estou descartando a correção de bugs desse navegador ao desenvolver sites. Já existem várias campanhas na web para aposentar esse navegador (publiquei uma no blog). Mas como estava conversando com um colega na faculdade hoje: O Windows SP3 ainda instala o IE 6. Por isso muitos ainda utilizam esse navegador infelizmente.
Abração e volte sempre ao blog
Dezembro 21st, 2011 at 4:38 pm
Ola amigo tudo bem, bom a solução que postou é excelente, porem estou a procura de algo que acho que vc pode me ajudar, não sei nada de javascript(preciso rever meus conceitos), bom estou criando um sistema de cadastros que tera a aparencia de um sistema feito em delphi, então alem do que demonstrou ai em cima, eu precisava que ao clicar na linha ela ficasse marcada e sendo que só se poderiam marcar uma linha por vez pois embaixo colocarei um botao editar e excluir, então a pessoa seleciona a linha e escolhe a ação!