Criando tabelas zebradas com JQuery

10 de outubro de 2009

Olá leitores, hoje vou mostrar como como criar uma tabela zebrada com JQuery, a utilização deste framework para esta atividade é muito simples assim como a realização de tudo com JQuery. A única exigência para a aula de hoje é conhecer um pouco de HTML e CSS.

Para colocar o framework na sua página primeiro você precisa baixá-lo caso não o possua, no site você poderá fazer o download e descompactá-lo na sua pasta onde estiver o seu site.

O código para colocá-lo em sua página é este:

<script src=”js/jquery.js” type=”text/javascript”></script>

Abaixo está o código que devemos colocar para que as tabelas fiquem zebradas.

<script type=”text/javascript”>

$(document).ready(function() {

$(‘tr:nth-child(even)’).addClass(‘alt’);

$(‘td:contains(Henry)’).parent().find(‘td:eq(1)’)

.addClass(‘highlight’).end().find(‘td:eq(2)’).addClass(‘highlight’);

});

</script>

Esta é nossa página HTML que usaremos para testar a execução do código Java script.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>licao 3</title>

<script src=”js/jquery.js” type=”text/javascript”></script>

<style type=”text/css”>

tr {

background-color: #fff;

}

.alt {

background-color: #ccc;

}

.highlight {font-weight:bold; font-style: italic;}

.cor{

background-color: #FF0000;

}

</style>

<script language=”javascript”>

$(document).ready(function() {

$(‘tr:nth-child(even)’).addClass(‘alt’);

$(‘td:contains(Henry)’).parent().find(‘td:eq(1)’)

.addClass(‘highlight’).end().find(‘td:eq(2)’).addClass(‘highlight’);

});

</script>

</head>

<body>

<table>

<tr>

<td>As You Like It</td>

<td>Comedy</td>

<td></td>

</tr>

<tr>

<td>All’s Well that Ends Well</td>

<td>Comedy</td>

<td>1601</td>

</tr>

<tr>

<td>Hamlet</td>

<td>Tragedy</td>

<td>1604</td>

</tr>

<tr>

<td>Macbeth</td>

<td>Tragedy</td>

<td>1606</td>

</tr>

</table>

</body>

</html>

Explicando o código JQuery, na primeira linha dizemos que o código só deve ser rodado depois que a página for totalmente carregada.

$(document).ready(function() {

Depois na segunda linha está a mágica dizemos com o comando $(‘tr:nth-child(even)’) que as linhas da tabela devem a cada 1 linha mudar a cor para a definida na classe ‘alt’ pelo comando css, assim mudamos a cor de fundo da linha.

$(‘tr:nth-child(even)’).addClass(‘alt’);

Pronto, terminamos nossa tabela zebrada, dúvidas deixem um comentário que explico com prazer.

Até mais.

Anúncios