Recover css with jQuery

Asked

Viewed 234 times

4

Galera set up a table where I click with the right button and the line turns yellow, and displays a menu. Everything works 100%. The problem is that when I click elsewhere and the menu closes and the line background color turns white. How do I recover the old color?

To simulate the error just right-click on a line, and then click off it.

<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

jquery html css javascript

1 answer

2


Well, I wouldn’t do it the way it is, you have a lot of "together" stuff, which makes understanding difficult. But I will leave here the simplest solution I thought. It is not the best, but I know it is very simple.

First, add !important; in your class context_menu_select, thus:

.context_menu_select {
    background: #FBBC05 !important;
}

After that, create a jQuery function to change the colors of the columns. This way you will not save the previous color, but "alternate" the colors again:

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

Once this is done, simply call your function by clicking outside 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>
<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

  • perfect, thank you very much :)

  • Friend found a little problem, I tried to fix but it did not work. I edited your answer so you see the error. I played the javascript and you added changes the color of all tables, but I need it to change only from table class="tab_data" table. You can fix it?

  • 1

    @Hugoborges Just change the function to pick up only this table. I edited the answer with the way to do.

  • a ok, mine was not working because I was trying so : $(".tab_data"). Vlw once again ;)

Browser other questions tagged jquery html css javascript

You are not signed in. Login or sign up in order to post.