4

Galera montei uma tabela onde eu clico com o botão direito e a linha fica amarela, e exibe um menu. Tudo funciona 100%. O problema e que quando clico em outro lugar e o menu fecha e cor de fundo da linha fica branca. Como faço para recuperar a cor antiga?

Para simular o erro basta clicar com o botão direito sobre uma linha, e depois clicar fora dela.

<script>
// Verifica se vai fechar o menu
$(function () {
    $("body").on("click", function (e) {
        var div = $(".context_menu_pai");
        if (div.has(e.target).length || e.target === div[0]) {
            return;
        } else {
            // Remove o CSS da linha selecionada
            $("tr").removeClass('context_menu_select');
            // Fecha menu
            $(".context_menu_pai").hide();
        }
    });
});
// Verifica se abre o menu
$("tr").mousedown(function (e) {
    // Veriaveis de cálculo
    var pX = e.pageX;
    var pY = e.pageY;
    // Calculos da posição
    if ($(".tabs-container").length) {
        pX = pX - 10;
        pY = pY - 40;
    }
    if ($(".tab_dados").length) {
        pX = pX - 10;
        pY = pY - 50;
    }
    // Define a posição do menu            
    $('.context_menu_pai').css({
        left: (pX + "px"),
        top: (pY + "px")
    }).show();
    // Remove o CSS da linha selecionada
    $("tr").removeClass('context_menu_select');
    // Verifica qual botão clicou
    if (e.button === 2) {
        $("#menu" + this.id).show();
        $(".context_menu_pai:not(#menu" + this.id + ")").hide();

        // Remove o CSS da linha selecionada
        $("#" + this.id).removeClass('linhas');
        // Adiciona CSS na linha selecionada
        $("#" + this.id).addClass('context_menu_select');
    } else {
        // Fecha menu
        $(".context_menu_pai").hide();
    }
});
</script>
.tab_dados{
    border-collapse: collapse;
}
.tab_dados a{
    color: #484848;
    text-decoration: none;
}
/*Definido cor das linhas pares*/
.linhas:nth-child(even) {
    background: #F7F7F7;
}
/*Definindo cor das Linhas impáres*/
.linhas:nth-child(odd) {
    background: #FFFFFF;
} 
/*Definindo cor ao selecionar com o mouse*/
.linhas:hover {
    background: #F1F1F1;
}
/*Definindo linhas*/
.tab_dados tr {
    height: 35px;
    border-bottom: 1px solid #D5D5D5;
} 

/*Definindo head da tabela*/
.tab_dados thead tr:hover {
    background: #FFFFFF;
}
/*Definindo rodape da tabela*/
.tab_dados tfoot tr:hover {
    background: #FFFFFF;
}
.tab_dados tfoot tr {
    border:0;
}
.tab_dados  {
    color:#484848;
}
.context_menu_pai{
    display: none;
    position: absolute;
    width: 200px;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    border-radius: 2px;
}
.context_menu { 
    padding: 12px 8px;
    cursor: pointer;
    display: block; 
    color: #484848;
    border-left: 7px solid #FFFFFF;
}
.context_menu:hover { 
    background: #EEEEEE; 
    border-left: 7px solid #0091FF;
}
.context_menu_select {
    background: #FBBC05;
}
.text_erro {
    color: #F65314;
}
.text_alert {
    color: #FBBC05;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body oncontextmenu='return false'>

<table class="tab_dados" width="100%" border="0">
  <tr>
    <th width="40px"><i>ID</i>
    </th>
    <th><i>NOME</i>
    </th>
  </tr>
  <tr id='1' class='linhas'>
    <td align=center>1</td>
    <td align=center>bruno</td>
  </tr>
  <tr id='2' class='linhas'>
    <td align=center>2</td>
    <td align=center>hugo</td>
  </tr>
  <tr id='3' class='linhas'>
    <td align=center>3</td>
    <td align=center>rafael</td>
  </tr>

</table>

<div class='context_menu_pai' id='1'>
  <li class='context_menu'>ver mais</li>
</div <div class='context_menu_pai' id='2'>
<li class='context_menu'>ver mais</li>
</div <div class='context_menu_pai' id='3'>
<li class='context_menu'>ver mais</li>
</div

1 Resposta 1

2

Bom, eu não faria da forma que está, você tem muita coisa "junta", o que acaba dificultando o entendimento. Mas deixarei aqui a solução mais simples que pensei. Não é a melhor, mas sei que é bem simples.

Primeiro, adicione !important; em sua classe context_menu_select, dessa forma:

.context_menu_select {
    background: #FBBC05 !important;
}

Após isso, crie uma função em jQuery para alterar as cores das colunas. Dessa forma nãos erá salvo a cor anterior, e sim "alternará" as cores novamente:

function AnternarCor(){
  $("table tr").css("background-color", function(index) {
      return index%2==0?"#F7F7F7":"#FFFFFF";
  });
}

Feito isso, basta chamar sua função ao clicar fora da linha. Veja o exemplo completo:

<script>
// Verifica se vai fechar o menu
$(function () {
    $("body").on("click", function (e) {
        var div = $(".context_menu_pai");
        if (div.has(e.target).length || e.target === div[0]) {
            return;
        } else {
            // Remove o CSS da linha selecionada
            $("tr").removeClass('context_menu_select');
            // Fecha menu
            $(".context_menu_pai").hide();
            //Chama a função aqui
            AnternarCor();
        }
    });
});
// Verifica se abre o menu
$("tr").mousedown(function (e) {
    // Veriaveis de cálculo
    var pX = e.pageX;
    var pY = e.pageY;
    // Calculos da posição
    if ($(".tabs-container").length) {
        pX = pX - 10;
        pY = pY - 40;
    }
    if ($(".tab_dados").length) {
        pX = pX - 10;
        pY = pY - 50;
    }
    // Define a posição do menu            
    $('.context_menu_pai').css({
        left: (pX + "px"),
        top: (pY + "px")
    }).show();
    // Remove o CSS da linha selecionada
    $("tr").removeClass('context_menu_select');
    // Verifica qual botão clicou
    if (e.button === 2) {
        $("#menu" + this.id).show();
        $(".context_menu_pai:not(#menu" + this.id + ")").hide();

        // Remove o CSS da linha selecionada
        $("#" + this.id).removeClass('linhas');
        // Adiciona CSS na linha selecionada
        $("#" + this.id).addClass('context_menu_select');
    } else {
        // Fecha menu
        $(".context_menu_pai").hide();
    }
});

function AnternarCor(){
  $(".tab_dados tr").css("background-color", function(index) {
      return index%2==0?"#FFFFFF":"#F7F7F7";
  });
}

</script>
.tab_dados{
    border-collapse: collapse;
}
.tab_dados a{
    color: #484848;
    text-decoration: none;
}
/*Definido cor das linhas pares*/
.linhas:nth-child(even) {
    background: #F7F7F7;
}
/*Definindo cor das Linhas impáres*/
.linhas:nth-child(odd) {
    background: #FFFFFF;
} 
/*Definindo cor ao selecionar com o mouse*/
.linhas:hover {
    background: #F1F1F1;
}
/*Definindo linhas*/
.tab_dados tr {
    height: 35px;
    border-bottom: 1px solid #D5D5D5;
} 

/*Definindo head da tabela*/
.tab_dados thead tr:hover {
    background: #FFFFFF;
}
/*Definindo rodape da tabela*/
.tab_dados tfoot tr:hover {
    background: #FFFFFF;
}
.tab_dados tfoot tr {
    border:0;
}
.tab_dados  {
    color:#484848;
}
.context_menu_pai{
    display: none;
    position: absolute;
    width: 200px;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    border-radius: 2px;
}
.context_menu { 
    padding: 12px 8px;
    cursor: pointer;
    display: block; 
    color: #484848;
    border-left: 7px solid #FFFFFF;
}
.context_menu:hover { 
    background: #EEEEEE; 
    border-left: 7px solid #0091FF;
}
.context_menu_select {
   background: #FBBC05 !important;
}
.text_erro {
    color: #F65314;
}
.text_alert {
    color: #FBBC05;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body oncontextmenu='return false'>

<table class="tab_dados" width="100%" border="0">
  <tr>
    <th width="40px"><i>ID</i>
    </th>
    <th><i>NOME</i>
    </th>
  </tr>
  <tr id='1' class='linhas'>
    <td align=center>1</td>
    <td align=center>bruno</td>
  </tr>
  <tr id='2' class='linhas'>
    <td align=center>2</td>
    <td align=center>hugo</td>
  </tr>
  <tr id='3' class='linhas'>
    <td align=center>3</td>
    <td align=center>rafael</td>
  </tr>

</table>

<div class='context_menu_pai' id='1'>
  <li class='context_menu'>ver mais</li>
</div <div class='context_menu_pai' id='2'>
<li class='context_menu'>ver mais</li>
</div <div class='context_menu_pai' id='3'>
<li class='context_menu'>ver mais</li>
</div

4
  • perfeito, muito obrigado :) 4/05/2016 às 13:07
  • Amigo achei um probleminha, eu tentei arrumar mas não deu certo. Eu editei a sua resposta para vc ver o erro. Toquei o o javascript e vc adicionou muda a cor de todas as tabelas, porém preciso que ele muda apenas da tabela class="tab_dados" . Tem como resolver isso? 4/05/2016 às 14:07
  • 1
    @HugoBorges Basta alterar a função para pegar somente esta tabela. Editei a resposta com a forma de fazer.
    – Randrade
    4/05/2016 às 14:09
  • a ok, o meu não estava dando certo porque eu estava tentando assim : $(".tab_dados"). Vlw mais uma vez ;) 4/05/2016 às 14:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .