jQuery - Tabelas listradas

Aldeia Numaboa

Um portal diferente em Português do Brasil

Informática da Aldeia

Tutoriais

Home

Informática

Tutoriais e Programação

Javascript

jQuery - Tabelas listradas

Novo na Info

Segurança na área administrativa do Joomla

UNIX - a história do precursor do Linux

Joomla e Smilies

Envio de emails pelo Joomla

Entidades caractere do HTML

Na Aldeia

Há 58 visitantes online

3308 registros

0 hoje

12 nesta semana

45 neste mês

Boas vindas: paulo

Estatística

Artigos: 1064
Leituras: 6041764
Arquivados: 21
Downloads: 533
Baixados: 172402
Glossário: 1208
Bibliografia: 25
Links: 90

Visitas de onde

Top 5:

	73%	Brasil (49347)
	5%	Portugal (3192)
	3%	EUA (2228)
	0%	Rússia (264)
	0%	Holanda (240)

67765 visitas de 100 países

Hoje:	154
Ontem:	2619
No mês:	41950
Mês passado:	25815
Total:	67765
Recorde:	3037
No dia:	04.03.10
Leituras hoje:	21289
Leituras Total:	290717
Bots hoje:	92
Dados desde:	16.02.2010

Login

Kanji da hora

好

Faça contato

+ Lidos (60 dias)

Ter

Dez

2008

10:12

jQuery - Tabelas listradas

(8 votos, média 5.0 de 5)

Escrito por vovó Vicki

Índice do Artigo
jQuery - Tabelas listradas
Objetos jQuery
Mais código jQuery
Todas as páginas

Página 1 de 3

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.

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

<html>
   <title>Página com tabela listrada</title>
   <head></head>
   <body>
      <p>Esta é a tabela feita na unha:</p>
      <table>
         <tr bgcolor="#3e83c9">
            <th style="color: #ffffff;">Tit 1</th>
            <th style="color: #ffffff;">Tit 2</th>
            <th style="color: #ffffff;">Tit 3</th>
         </tr>
         <tr>
            <td style="border-bottom: 1px solid #95bce2;">texto1</td>
            <td style="border-bottom: 1px solid #95bce2;">texto2</td>
            <td style="border-bottom: 1px solid #95bce2;">texto3</td>
         </tr>
         <tr bgcolor="#ecf6fc">
            <td style="border-bottom: 1px solid #95bce2;">texto1</td>
            <td style="border-bottom: 1px solid #95bce2;">texto2</td>
            <td style="border-bottom: 1px solid #95bce2;">texto3</td>
         </tr>
         <tr>
            <td style="border-bottom: 1px solid #95bce2;">texto1</td>
            <td style="border-bottom: 1px solid #95bce2;">texto2</td>
            <td style="border-bottom: 1px solid #95bce2;">texto3</td>
         </tr>
         <tr bgcolor="#ecf6fc">
            <td style="border-bottom: 1px solid #95bce2;">texto1</td>
            <td style="border-bottom: 1px solid #95bce2;">texto2</td>
            <td style="border-bottom: 1px solid #95bce2;">texto3</td>
         </tr>
         <tr>
            <td style="border-bottom: 1px solid #95bce2;">texto1</td>
            <td style="border-bottom: 1px solid #95bce2;">texto2</td>
            <td style="border-bottom: 1px solid #95bce2;">texto3</td>
         </tr>
      </table>
   </body>
</html>

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:

<html>
   <title>Página com tabela listrada via CSS</title>
   <head>
      <style type="text/css">
         .titulo { background-color: bgcolor="#3e83c9"; color: #ffffff; }
         .linha { border-bottom: 1px solid #95bce2; }
         .cor { background-color: #ecf6fc; }
      </style>
   </head>
   <body>
      <p>Mais uma vez, esta é a tabela feita na unha:</p>
      <table>
         <tr>
            <th class="titulo">Tit 1</th>
            <th class="titulo">Tit 2</th>
            <th class="titulo">Tit 3</th>
         </tr>
         <tr>
            <td class="linha">texto1</td>
            <td class="linha">texto2</td>
            <td class="linha">texto3</td>
         </tr>
         <tr class="cor">
            <td class="linha">texto1</td>
            <td class="linha">texto2</td>
            <td class="linha">texto3</td>
         </tr>
         <tr>
            <td class="linha">texto1</td>
            <td class="linha">texto2</td>
            <td class="linha">texto3</td>
         </tr>
         <tr class="cor">
            <td class="linha">texto1</td>
            <td class="linha">texto2</td>
            <td class="linha">texto3</td>
         </tr>
         <tr>
            <td class="linha">texto1</td>
            <td class="linha">texto2</td>
            <td class="linha">texto3</td>
         </tr>
      </table>
   </body>
</html>

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.

Anterior - Seguinte >>

Última atualização ( Seg, 08.02.2010 21:11 )

Exceto onde especificamente citado, todo material deste site está sob Licença Creative Commons