Recover css with jQuery

Question

Recover css with jQuery

Navigation

#1 by (2 votes)

4

Galera I mounted a table where I right click and the line turns yellow, and displays a menu. Everything works 100%. The problem is that when I click somewhere else and the menu closes and the background color of the line turns white. How do I recover the old color?

To simulate the error simply right click on a line, and then click outside.

<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><bodyoncontextmenu='returnfalse'><tableclass="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

javascript html jquery css

asked by anonymous 03.05.2016 / 22:52

1 answer

overflow hidden with float left How to create default filters with entity framework 6?

score 2 · Accepted Answer

Well, I would not do it the way it is, you have a lot of things together, which makes it difficult to understand. But I'll leave the simplest solution here that I thought. It's not the best, but I know it's pretty simple.

First, add !important; to your context_menu_select class, like this:

.context_menu_select {
    background: #FBBC05 !important;
}

After that, create a function in jQuery to change the colors of the columns. That way the previous color will not be saved, but will "alternate" the colors again:

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

Once you've done that, you just call your function by clicking off the line. See the full example:

<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><bodyoncontextmenu='returnfalse'><tableclass="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