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

Na Aldeia

Há 134 visitantes online

3630 registros

0 hoje

14 nesta semana

4 neste mês

Boas vindas: flor

Estatística

Membros: 3639
Artigos: 1045
Links: 90
Leituras: 6681436

Login

Kanji da hora

好

Faça contato

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