Melhorando visualização de tabelas com JQuery

Neste post mostrarei como melhorar a visualização de dados em tabelas utilizando scripts JQuery. O que facilita muito a leitura de dados contidos em tabelas com muito conteúdo  mantendo uma cor mais clara nas linhas impares da tabela, e uma cor mais escura nas linhas pares.

Hoje a implementação desta tecnica geralmente é feita de duas formas. A primeira e provavelmente mais usada é através de uma classe CSS que diferencia a cor de fundo dos elementos <tr> das tabelas. A outra é alternando na “mão”  a propriedade bgcolor tambem das <tr>. Os dois casos implicam em adicionar atributos em todo o código na mão. E se um campo novo tiver que entrar no meio de um formulario o programador tera que alterar toda a ordem da alternancia.

No WebForms do ASP.NET este trabalho gera repetição de código devido a necessidade de se utilizar as tags<itemtemplate> e <alternateitemtemplate> apenas para a configuração da alternancia de cores.

No entanto o JQuery possui dois seletores que podem facilitar muito este trabalho. Os filtros de seleção even permite que apenas os elementos pares do seletor sejam selecionados, ao passo que o filtro de seleção odd permite que apenas os elementos impares do seletor sejam selecionados. Segue um exemplo para melhor ilustrar a utilização destes seletores:

<script type="text/javascript" >
     $(document).ready(function() {
         $('table tbody tr:even').css('background-color','gray');
         $('table tbody tr:odd').css('background-color','white');
     });
 </script>

HTML Completo:

<html>
 <head>
 <title>Exemplo de tabelas com JQuery</title>
 <!-- Importando o script do JQuery -->
 <script type="text/javascript" src="jquery-1.7.1.js"></script>
 </head>
 <body>
 <table cellpadding="0" cellspacing="0">
 <thead>
 <tr>
 <th>Coluna 1</th>
 <th>Coluna 2</th>
 <th>Coluna 3</th>
 <th>Coluna 4</th>
 <th>Coluna 5</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Valor 1</td>
 <td>Valor 2</td>
 <td>Valor 3</td>
 <td>Valor 4</td>
 <td>Valor 5</td>
 </tr>
 <tr>
 <td>Valor 1</td>
 <td>Valor 2</td>
 <td>Valor 3</td>
 <td>Valor 4</td>
 <td>Valor 5</td>
 </tr>
 <!--MAIS LINHAS-->
 </tbody>
 <tfoot></tfoot>
</table>
 <script type="text/javascript" >
 // Script que faz a alternância das cores nas linhas da tabela
 $(document).ready(function() {
 // Linhas pares
 $('table tbody tr:even').css('background-color','gray');
 // Linhas ímpares
 $('table tbody tr:odd').css('background-color','white');
 });
     </script>
     </body>
 </html>

O efeito deste código acima está na seguinte imagem:

Lembrando que os filtros de seletores even e odd não se restringem apenas a tabelas. Podem ser aplicados em qualquer outro elemento do DOM. Sempre seguindo a mesma lógica, even para filtrar o elementos pares e odd para filtrar os elementos impares.

Espero ter ajudado.

Até a próxima.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s