namespace Programatik - JQuery: Melhore o visual das suas tabelas

« C#: String.Format()

Ajax: Utilizando Ajax com Zend Framework »

06.10.08

JQuery: Melhore o visual das suas tabelas

04:25:56, por mrxrsd

334 visualizações
Categorias: javascript, jquery, design, css

Vamos começar com uma tabela simples.

HTML:

	<table border="1" width="200px" cellspacing="0">
	<tr>
	<td colspan="2">
	Titulo
	</td>
	</tr>
	<tr>
	<td>
	a
	</td>
	<td>
	b
	</td>
	</tr>
	<tr>
	<td>
	a
	</td>
	<td>
	b
	</td>
	</tr>
	</table>

Ela vai ter essa aparencia:

Vamos melhorar um pouco o visual colocando uma imagem gradiente no titulo.

CSS:

.linhaTitulo {
                 background-image: url(bg_titulo_tbl.jpg);
                 color: #FFF;
                 text-align:center;
        }

Não podemos esquecer de adicionar o class="linhaTitulo" na linha da tabela. O visual ficou um pouco melhor, uma outra idéia interessante é colocar para mudar a cor da linha quando o mouse tiver em cima, obtendo o visual abaixo.

Iremos obter esse efeito com a ajuda do JQuery e CSS. Para adicionar o JQuery:

HTML:

E depois fazemos o javascript responsável pelo onmouseover

Javascript:

<script type="text/javascript">
                $(function(){
                        $( 'tbody tr' )
                                .mouseover(function(){
                                        $(this).addClass('over');
                                })
                                .mouseout(function(){
                                        $(this).removeClass('over');
                                });
                });
        </script>

E tambem é necessário adicionar a classe css com as novas cores quando se passa o mouse.

CSS:

.over {
                background: #0BF;
        }

Código Final:

HTML:

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
	<script type="text/javascript">
	$(function(){
	$( 'tbody tr' )
	.mouseover(function(){
	$(this).addClass('over');
	})
	.mouseout(function(){
	$(this).removeClass('over');
	});
	});
	</script>

	<style type="text/css">
	tr {
	background: #FFF;
	}

	.over {
	background: #0BF;
	}

	.linhaTitulo {
	background-image: url(bg_titulo_tbl.jpg);
	color: #FFF;
	text-align:center;
	}

	table {
	border: 1px solid;
	}
	</style>



	<table border="1" width="200px" cellspacing="0">
	<tr class="linhaTitulo">
	<td colspan="2">
	Titulo
	</td>
	</tr>
	<tr>
	<td>
	a
	</td>
	<td>
	b
	</td>
	</tr>
	<tr>
	<td>
	a
	</td>
	<td>
	b
	</td>
	</tr>
	</table>