jquery

leooizepi · Maio 12, 2009

e ae galera... estou com um problema com jquery aki...

é o seguinte... por exemplo tenho duas tabelas..

<table>
		<thead>
			<tr>
				<th>Código</th>
				<th>Nome</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>nome 1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>nome 1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>nome 1</td>
			</tr>
		</tbody>
	</table>
<table >
		<thead>
			<tr>
				<th>Código</th>
				<th>Nome</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>nome 1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>nome 1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>nome 1</td>
			</tr>
		</tbody>
	</table>

beleza... agora eu estou preenchendo as linhas impar e par.... soh q ta acontecendo um problema... na primeira tabela tenho 3 linhas... entao a hora q preenhce fica assim.. linha 1-> BRANCO, linha 2-> AZUL, linha 3-> BRANCO... beleza.. ate aki tudo bem... soh q quando ele vai para a outra tabela... ele começa com a linha PAR... contando ela como numero 4...

o q eu queria era começar do inicio... dai entao ficava correto!!!

codigo de como to usando para preencher as linhas

$('table tbody tr:odd').addClass('impar');			
$('table tbody tr:even').addClass('par');

valeu... abraço!!

Daniel-DF · Maio 13, 2009

<!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" xml:lang="pt-br" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Livro jQuery do Maujor | Tabelas</title>
<style type="text/css" media="all">
body {
	width:600px;	
	font: 80%/1.2 Arial, Helvetica, sans-serif;
	margin:30px auto;
	padding:0;
	color:#666;
	}
table {
	width:550px;
	border-collapse: collapse;
	border: 2px solid #999;
	margin:0 auto;
	}
caption { 
	text-align: right;
	margin-bottom: 0.3em;
	border-bottom: 1px solid #333;
	padding-right: 0.3em;
}
thead tr th {
	text-align:center;
	border-bottom: 2px solid #999;
	border-left: 2px solid #999;
	}
tr td, tr th {
	padding: 1px 5px;
	text-align:left;
	font-size: 0.9em;
	border: 1px dotted #333;
	} 
tfoot tr td {
	text-align:center;
	border-top: 2px solid #999;
	}
/* CSS para efeitos jQuery */
.impar {background:#add6ef;}
.par {background:#d6e2e5;}
.destacar {
	background:#444; 
	color:#fff;
	}
/* Fim CSS para efeitos jQuery */
</style>
<script type="text/javascript" src="../jquery-1.2.6.js"></script>
<script type="text/javascript">
//<![CDATA[
	$(document).ready(function() {
		$('table#horario tbody tr:odd').addClass('impar');			
		$('table#horario tbody tr:even').addClass('par');			
		
		$('table#horario tbody tr').hover(
		function() {
			$(this).addClass('destacar');			
		},
		function() {
			$(this).removeClass('destacar');			
		});
	});
// ]]>	
</script>
</head>
<body>
<table id="horario">
	<caption>
	Viação Alfa - Horários
	</caption>
	<thead>
		<tr id="horizontal">
			<th>Destino</th>
			<th scope="col">Saída</th>
			<th scope="col">Chegada</th>
			<th scope="col">Classe </th>
			<th scope="col">Tarifa </th>
			<th scope="col">Frequência</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="6">Válida para o período de 02/10/2008 a 30/11/ 2008.</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th scope="row">Brusque</th>
			<td>06:45</td>
			<td>14:30</td>
			<td>Convencional</td>
			<td>R$80,00</td>
			<td>Diária</td>
		</tr>
		<tr>
			<th scope="row">Joinville</th>
			<td>12:30</td>
			<td>21:00</td>
			<td>Convencional</td>
			<td>R$100,00</td>
			<td>Sábado</td>
		</tr>
		<tr>
			<th scope="row">São Paulo</th>
			<td>19:00</td>
			<td>06:00</td>
			<td>Leito</td>
			<td>R$150,00</td>
			<td>Diária</td>
		</tr>
		<tr>
			<th scope="row">Porto União</th>
			<td>13:00</td>
			<td>18:00</td>
			<td>Convencional</td>
			<td>R$60,00</td>
			<td>Diária</td>
		</tr>
		<tr>
			<th scope="row">Caçador</th>
			<td>00:30</td>
			<td>23:00</td>
			<td>Executivo</td>
			<td>R$210,00</td>
			<td>Seg. e Dom.</td>
		</tr>
		<tr>
			<th scope="row">Sorocaba</th>
			<td>21:15</td>
			<td>23:45</td>
			<td>Leito</td>
			<td>R$280,00</td>
			<td>Sábado</td>
		</tr>
		<tr>
			<th scope="row">Blumenau</th>
			<td>08:00</td>
			<td>16:00</td>
			<td>Convencional</td>
			<td>R$85,00</td>
			<td>Diária.</td>
		</tr>
		<tr>
			<th scope="row">Itajaí</th>
			<td>23:00</td>
			<td>06:00</td>
			<td>Executivo</td>
			<td>R$165,00</td>
			<td>Qua. e Sáb.</td>
		</tr>
		<tr>
			<th scope="row">Lajes</th>
			<td>16:45</td>
			<td>19:30</td>
			<td>Executivo</td>
			<td>R$50,00</td>
			<td>Terça</td>
		</tr>
		<tr>
			<th scope="row">Urussanga</th>
			<td>14:30</td>
			<td>20:00</td>
			<td>Leito</td>
			<td>R$100,00</td>
			<td>Sábado</td>
		</tr>
		<tr>
			<th scope="row">Canoinhas</th>
			<td>19:30</td>
			<td>07:30</td>
			<td>Leito</td>
			<td>R$190,00</td>
			<td>Seg. a ---. </td>
		</tr>
		<tr>
			<th scope="row">S. Fco. Sul</th>
			<td>01:00</td>
			<td>07:00</td>
			<td>Convencional</td>
			<td>R$90,00</td>
			<td>Qua. a ---. </td>
		</tr>
		<tr>
			<th scope="row">Joaçaba</th>
			<td>06:30</td>
			<td>12:00</td>
			<td>Executivo</td>
			<td>R$70,00</td>
			<td>Seg. e Qua.</td>
		</tr>
		<tr>
			<th scope="row">Jaraguá do Sul</th>
			<td>23:15</td>
			<td>08:45</td>
			<td>Leito</td>
			<td>R$250,00</td>
			<td>Sábado</td>
		</tr>
		<tr>
			<th scope="row">Xanxerê</th>
			<td>18:00</td>
			<td>22:00</td>
			<td>Executivo</td>
			<td>R$75,00</td>
			<td>Diária.</td>
		</tr>
		<tr>
			<th scope="row">Chapecó</th>
			<td>13:00</td>
			<td>21:00</td>
			<td>Executivo</td>
			<td>R$105,00</td>
			<td>Qua. e Dom.</td>
		</tr>
		<tr>
			<th scope="row">Xaxim</th>
			<td>07:00</td>
			<td>14:00</td>
			<td>Executivo</td>
			<td>R$165,00</td>
			<td>Dom.</td>
		</tr>	</tbody>
</table>
<p>Passe o mouse sobre qualquer célula da tabela</p>

<i style="display:block; font-style:normal; margin-top:50px; border-top:1px dotted #ccc;
padding-top:5px;">Arquivos exemplo: <a href="arquivo-10.4e.html">« anterior</a> | <a href="arquivo-10.5b.html">próximo »</a></i>

</body>
</html>

Abraço e Deus te abençoe

Entrar

Arquivado

jquery

Recommended Posts

leooizepi 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Daniel-DF 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante