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.

Veja o efeito final.

Posts relacionados