Cor zebrada na tabela ao passar mouse em cima

André Wielki · Julho 12, 2014

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;
                }
        }
}
/* MOSTRA E ESCONDE BACKGROUND DAS TR ZEBRADAUP */
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;
                }
        }
}

Código da página com as duas tabelas zebradas:

<!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>

wilnet · Julho 12, 2014

Isso ajuda:

<tr style="cursor:default" onMouseOver="javascript:this.style.backgroundColor='#F2F2F2'" onMouseOut="javascript:this.style.backgroundColor='#FFFFFF'">

Isso irá aplicar o efeito de "over" ao passar e tirar o mouse.

victorqueiroz · Julho 12, 2014

na primeira tabela vc definiu o id="zebradaUP", e na segunda vc só colocou id="zebrada", o id tem que ser igual ao da primeira tabela senão o java script não vai identificar que a segunda é para zebrar tbm...

cristianoolv · Julho 13, 2014

Isso se pode fazer apenas com css...

André Wielki · Julho 14, 2014

Isso ajuda:
<tr style="cursor:default" onMouseOver="javascript:this.style.backgroundColor='#F2F2F2'" onMouseOut="javascript:this.style.backgroundColor='#FFFFFF'">
Isso irá aplicar o efeito de "over" ao passar e tirar o mouse.

Tentei como voce falou ai diretamente e tambem tentei fazer a mesma coisa que voce fez, só que do meu jeito, e não deu nem do meu nem do seu jeito.

Olha como ficou meu código do meu jeito, tenta me ajudar ai:

    <table class="Tabelinha-Table">
        <tr class="defaultTR" id="zebradinha" onMouseOver="zebradinhaHover()" onMouseOut="zebradinhaOut()">
            <th style="width:25%;">NOME</th>
            <th style="width:5%;">DDD</th>
            <th style="width:25%;">TELEFONE</th>
            <th style="width:45%;">E-MAIL</th>
        </tr>
   </table>

E no arquivo externo de js que ta sendo carregado no head ta assim:

/* ESQUEMA ALTERNATIVO PARA TR ZEBRADA */
function zebradinhaHover() {
    document.getElementById("zebradinha").style.backgroundColor='#F2F2F2';
}
function zebradinhaOut() {
    document.getElementById("zebradinha").style.backgroundColor='#FFF';
}

E no arquivo de css externo:

.defaultTR {
    cursor:default;
    background-color:rgba(0,0,0,0.4);
    height:25px;
    font-family:Tahoma,Arial,Verdana;
    border:0px;
    padding:0px;
}

Consegue encontrar o erro? :/

RESPOSTA AO VICTOR QUEIROZ:

=================================================

na primeira tabela você definiu o id="zebradaUP", e na segunda você só colocou id="zebrada", o id tem que ser igual ao da primeira tabela senão o java script não vai identificar que a segunda é para zebrar tbm...

Ja tentei, se eu mantenho dois id iguais na mesma pagina somente o mais em cima funciona, sendo assim não da certo pra manter duas tabelas zebradas pois vai ter dois id e somente uma funciona.

André Wielki · Julho 14, 2014

RESOLVIDO DA SEGUINTE FORMA:

arquivo script.js:

/* EVENTO WINDOW.ONLOAD
-------------------------------------------- */
window.onload = function() {
    zebrada("zebrada");
}
/* JS LISTAR ASSISTENCIAS
-------------------------------------------- */
function AssistenciasMaximize(variavelGET) {
    zebrada("zebradaUP");
    document.getElementById("CONTEUDO").style.display = "none";
    document.getElementById("JS-Assistencias").style.display = "block";
    document.getElementById("text-link").style.fontWeight = "bold";
    document.getElementById(variavelGET).style.fontWeight = "normal";
}
/* MOSTRA E ESCONDE BACKGROUND DAS TR ZEBRADA
-------------------------------------------- */
function id(el){
        return document.getElementById(el);
}
var cor_antiga;
function zebrada (variavel)
{
        var trs = id(variavel).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;
                }
        }
}

HTML:

<table class="Tabelinha-Table" id="zebrada">
<tr class="defaultTR"><td>TABELA 1 LINHA 1</td></tr>
<tr class="defaultTR"><td>TABELA 1 LINHA 2</td></tr>
</table>
<table class="Tabelinha-Table" id="zebradaUP">
<tr class="defaultTR"><td>TABELA 2 LINHA 1</td></tr>
<tr class="defaultTR"><td>TABELA 2 LINHA 2</td></tr>
</table>

Rafael Sirotheau · Julho 14, 2014

Conforme dito, isso pode ser feito com CSS (IE9+), combinando :nth-child com o :hover

:nth-child(valor)

troca-se o valor para odd (ímpar) ou even (par).

Entrar

Arquivado

Cor zebrada na tabela ao passar mouse em cima

Recommended Posts

André Wielki 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

victorqueiroz 34

Compartilhar este post

Link para o post

Compartilhar em outros sites

cristianoolv 93

Compartilhar este post

Link para o post

Compartilhar em outros sites

André Wielki 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

André Wielki 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Sirotheau 43

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante