Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, consegui fazer um código que ao passar o mouse em cima de uma tabela de cor zebrada, ele muda a cor da tr e ao tirar o mouse de cima ele retorna a cor antiga.
Até ai tudo bem, só que eu criei uma segunda tabela na mesma página, e agora só funciona na tabela mais superior a parte de cima do códgo, e a tabela a parte de baixo não funciona ao passar o mouse por cima nada acontece.
Vou postar aqui meu código JS e meu código da pagina com as duas tabelas para que vocês possam me ajudar.
Código JS:
/ MOSTRA E ESCONDE BACKGROUND DAS TR ZEBRADA /
function id( el ){
return document.getElementById( el );
}
var cor_antiga;
window.onload = function() var trs = id('zebrada').getElementsByTagName('tr');
for( var i=0; i<trs.length; i++ )
{
trs[i].onmouseover = function()
{
cor_antiga = this.style.backgroundColor;
this.style.backgroundColor = 'rgba(70,130,180,0.2)';
}
trs[i].onmouseout = function()
{
this.style.backgroundColor = cor_antiga;
}
}
}function idUP( elUP ){
return document.getElementById( elUP );
}
var cor_antigaUP;
window.onload = function() var trsUP = id('zebradaUP').getElementsByTagName('tr');
for( var iUP=0; iUP<trsUP.length; iUP++ )
{
trsUP[iUP].onmouseover = function()
{
cor_antigaUP = this.style.backgroundColor;
this.style.backgroundColor = 'rgba(70,130,180,0.2)';
}
trsUP[iUP].onmouseout = function()
{
this.style.backgroundColor = cor_antigaUP;
}
}
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<title><?php echo "$titulo"; ?></title>
<meta charset="ISO 8859-1">
<meta name="author" content="André Silveira Machado" />
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
<script src="js/script.js"></script>
<!-- Inicio da referencia ao ficheiro lightbox -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.js"></script>
<!-- Fim da referencia ao ficheiro lightbox -->
<style>
body {
background-image:url('images/background.png');
background-repeat:repeat;
}
</style>
</head>
<body>
<div id="PAGEDOWN">
<div>
<p style="font-size:14px;font-family:Arial,Tahoma;padding-bottom:5px;">Abaixo segue a lista de assistências e fabricantes disponíveis para rma ou conserto sob garantia:</p>
<hr/>
</div>
<div class="listaoPagedown">
<div class="ul-left">
<table class="Tabelinha-Table" id="zebradaUP">
<tr style="background-color:rgba(0,0,0,0.4);height:25px;font-family:Tahoma,Arial,Verdana;border:0px;padding:0px;">
<th style="width:10%">TIPO</th>
<th style="width:18%">RAZAO SOCIAL</th>
<th style="width:4%">DDD</th>
<th style="width:10%">TELEFONE</th>
<th style="width:18%">LOCALIDADE</th>
<th style="width:3%">UF</th>
<th style="width:7%">CEP</th>
<th style="width:22%">E-MAIL</th>
<th style="width:4%">SITE</th>
<th style="width:4%">UN</th>
</tr>
<?php
$sql = $conexao->query("SELECT * FROM assistencias ORDER BY tipo DESC, nome ASC");
while($linha = $sql->fetch_array()) {
?>
<tr
<?php
if (isset($TR1)) { echo 'class="Tabelinha-TR1"'; unset($TR1);}
else if (!isset($TR1)) { echo 'class="Tabelinha-TR2"'; $TR1 = TRUE; }
?>
>
<td>
<div class="li-left"><?php echo $linha["tipo"]; ?></div>
</td>
<td>
<div class="li-left <?php if (isset($_GET["id"])) { if ($_GET["id"]==$linha['id']){?> active <?php } }?>"><a href="index.php?page=assistencia&id=<?php echo $linha["id"]; ?>"> <?php echo $linha["nome"]; ?></a></div>
</td>
<td>
<div class="li-left"><?php echo $linha["ddd"]; ?></div>
</td>
<td>
<div class="li-left"><?php echo $linha["fone"]; ?></div>
</td>
<td>
<div class="li-left"><?php echo $linha["localidade"]; ?></div>
</td>
<td>
<div class="li-left"><?php echo $linha["uf"]; ?></div>
</td>
<td>
<div class="li-left"><?php echo $linha["cep"]; ?></div>
</td>
<td>
<div class="li-left"><?php echo $linha["email"]; ?></div>
</td>
<td>
<div class="li-left"><a href='<?php echo $linha["site"]; ?>'>www</a></div>
</td>
<td>
<div class="li-left"><?php echo $linha["un"]; ?></div>
</td>
</tr>
<?php
}
?>
</table>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div id="CONTEUDO">
<table class="Tabelinha-Table" id="zebrada">
<tr style="background-color:rgba(0,0,0,0.4);height:25px;font-family:Tahoma,Arial,Verdana;border:0px;padding:0px;">
<th style="width:7%">DATA</th>
<th style="width:13%">FABRICANTE</th>
<th style="width:14%">TIPO</th>
<th style="width:10%">ORIGEM</th>
<th style="width:20%">MODELO</th>
<th style="width:6%">NF R</th>
<th style="width:9%">AT</th>
<th style="width:17%">DESTINATÁRIO</th>
<th style="width:4%">OS</th>
</tr>
<?php
$sql = $conexao->query("SELECT * FROM solicitacoes WHERE status='Encaminhado' ORDER BY chave DESC");
while($linha = $sql->fetch_array()) {
?>
<tr
<?php
if ($linha['garantia']=="sem garantia") { echo 'class="Tabelinha-TR3"'; }
else if (isset($TR1)) { echo 'class="Tabelinha-TR1"'; unset($TR1);}
else if (!isset($TR1)) { echo 'class="Tabelinha-TR2"'; $TR1 = TRUE; }
?>
>
<td class="Tabelinha-TD"><a href="index.php?page=detalhes&id=<?php echo $linha['chave']; ?>"><div><?php echo $linha['encaminhado']; ?></div></a></td>
<td class="Tabelinha-TD"><a href="index.php?page=detalhes&id=<?php echo $linha['chave']; ?>"><div><?php echo $linha['fabricante']; ?></div></a></td>
<td class="Tabelinha-TD"><a href="index.php?page=detalhes&id=<?php echo $linha['chave']; ?>"><div><?php echo $linha['tipo']; ?></div></a></td>
<td class="Tabelinha-TD"><a href="index.php?page=detalhes&id=<?php echo $linha['chave']; ?>"><div><?php echo $linha['origem']; ?></div></a></td>
<td class="Tabelinha-TD"><a href="index.php?page=detalhes&id=<?php echo $linha['chave']; ?>"><div><?php echo $linha['modelo']; ?></div></a></td>
<td class="Tabelinha-TD"><a href="index.php?page=detalhes&id=<?php echo $linha['chave']; ?>"><div><?php echo $linha['nfremessa']; ?></div></a></td>
<td class="Tabelinha-TD"><a href="index.php?page=detalhes&id=<?php echo $linha['chave']; ?>"><div><?php echo $linha['atendimento']; ?></div></a></td>
<td class="Tabelinha-TD"><a href="index.php?page=detalhes&id=<?php echo $linha['chave']; ?>"><div><?php echo $linha['destinatario']; ?></div></a></td>
<td class="Tabelinha-TD"><a href="index.php?page=detalhes&id=<?php echo $linha['chave']; ?>"><div><?php echo $linha['os']; ?></div></a></td>
</tr>
<?php
}
$sql->close();
?>
</table>
</div>
</body>
</html>Carregando comentários...