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”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<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.
Escrito por edicarlosbarbosa 
Escrito por edicarlosbarbosa 
