A Aldeia Numaboa ancestral ainda está disponível para visitação. É a versão mais antiga da Aldeia que eu não quis simplesmente descartar depois de mais de 10 milhões de pageviews. Como diz a Sirley, nossa cozinheira e filósofa de plantão: "Misericórdia, ai que dó!"

Se você tiver curiosidade, o endereço é numaboa.net.br.

Leia mais...

Informática Numaboa - Tutoriais e Programação

jQuery - Tabelas listradas

Ter

2

Dez

2008


11:12

(8 votos, média 5.00 de 5) 


Este tutorial vai mostrar através de um exemplo bem simples como criar um código jQuery associado a estilos para fazer tabelas listradas, aquelas em que as cores das linhas vão se alternando.

{tag}{/tag}

Podemos obter o mesmo resultado usando uma porção de métodos. O mais básico de todos é usar atributos das tags do HTML.

Página com tabela listrada

Esta é a tabela feita na unha:

Tit 1 Tit 2 Tit 3
texto1 texto2 texto3
texto1 texto2 texto3
texto1 texto2 texto3
texto1 texto2 texto3
texto1 texto2 texto3
Tit 1 Tit 2 Tit 3
texto1 texto2 texto3
texto1 texto2 texto3
texto1 texto2 texto3
texto1 texto2 texto3
texto1 texto2 texto3

A tabela fica como a mostrada ao lado. Até que não está ruim, mas a mão de obra vai ser grande porque, para cada tabela com listras, vamos ter que escrever tudo de novo!

Existe uma saída um pouco mais elegante e menos trabalhosa: podemos usar uma folha de estilo onde definimos classes com as características desejadas que depois podem ser aplicadas a determinados elementos do documento. Por exemplo:

Página com tabela listrada via CSS

Mais uma vez, esta é a tabela feita na unha:

Tit 1 Tit 2 Tit 3
texto1 texto2 texto3
texto1 texto2 texto3
texto1 texto2 texto3
texto1 texto2 texto3
texto1 texto2 texto3

Ficou um pouco menos poluído, mas o trabalho ainda é praticamente o mesmo. Será que existe um jeito mais fácil de obter o mesmo resultado? Existe sim! Podemos fazer um javascript que faz o trabalho para nós ou usar um que já esteja pronto, como o script do Matthew Pennell. É um belo avanço, mas tem um jeito muito melhor e muitíssimo mais fácil.

Informações adicionais