Change font color of a cell Table with ajax

Asked

Viewed 336 times

2

Let’s say I have the following table:

Tabela de Usuários

I have an option that I click to activate the users selected by the checkbox. Everything already working and even occurs the activation of users. I am using Ajax to make the browser communicate with the server and activate user without having to load the whole page again. My only question is the following: After user is active I want you to change the cell marked from the Status field to: Active and Green color. It would be like?

I’ve done something with addClass('Ativo') however I could only make all the words of the line green. I would like only the cell to change to active and green color.

For now I have this in my code:

$('i.icon-check').closest('li').click(fnAtivar);

function fnAtivar() {
    var paraAtivar = $('#tableUsuario tr input:checkbox:checked').map(function () {
        return {
            cod_user: this.value,
            tr: $(this).closest('tr').get()
        }
    });

    $.ajax({
        url: "ativarUsuario.php",
        type: 'post',
        data: {
            codigosAtivar: paraAtivar.map(function () {
                return this.cod_user
            }).get()
        },
        success: function (resposta) {
        resposta = JSON.parse(resposta);
         console.log(resposta, typeof resposta, typeof resposta[0], resposta[1]);
        if (resposta[0]) paraAtivar.each(function(){
            //aqui acredito que vai o código para realizar a alteração
        });
        alert(resposta[1]);
    }
    });
}

1 answer

2


Try to do this:

if (resposta[0]) {
      var tabela = $('#tableUsuario tr');

      $.each(tabela, function(index, tr) {
        var checkbox = $(tr).find("input:checkbox");
        if ($(checkbox).is(':checked')) {
          $(tr).find(".status").text("Ativado");
          $(tr).find(".status").css("color", "#51A351");
        } else {
          $(tr).find(".status").text("Inativo");
          $(tr).find(".status").css("color", "#BD362F");
        }
      });
    }

Remembering that in any td that has the status, must have the class class='status'

  • Where do I put this in the code? do I have to remove something existing? @Antony Alkmim

  • Swap the if loop (answer[0]) to activate.each(Function(){ //here I believe the code to perform the change }); and put the one I put in the answer,

  • 1

    Thanks for the tip. @Bacco xD

  • I put, but nothing happened but show the alert. In this case resposta she comes from the other page like this [true, Usuário ativado com sucesso!]. In a function to delete user I used it this.tr[0].remove(); and here in your code is $(tr). - I say this, because it can help to achieve a result.

  • Dude, he’s already writing Ativado. . Now just change the color, which is not doing with this code :D

  • I changed the answer there, try to put the status class in the td that will inform if this active or inactive, I used $(tr) because the $.each(table,Function(index,element){}); it works like this, it will loop through all elements of the table and return the index that refers to the Indice, and the element that refers in the case each tr within the table, in the case I called the variable element tr for better understanding.

  • Dude, he’s already writing Ativado. . Now just change the color, which is not doing with this code :D

  • Do you want to change the color of what? tr? td? text within td?

  • of the Text Ativado

  • just put $(tr). find(". status"). css('color',"#CODIGODACOR");

  • Yes, he had already called me and made me. It worked :D

  • There’s something else - in td next to me I have an icon (link) to Disable as well. Wish at the same time as these changes occur, the icon switches to another that disables. if($escrever['status_user']=='ativo'|| $escrever['status_user']=='Ativo')&#xA; {&#xA; echo "<a href=\"desativarUsuario.php?cod=".$escrever['cod_user']."\"> <i class=\"icon-ban-circle\" title=\"Desativar Usuário!\"></i></a>";&#xA; }else{&#xA; echo "<a href=\"ativarUsuario.php?cod=".$escrever['cod_user']."\"> <i class=\"icon-check\" title=\"Ativar Usuário!\"></i></a>";&#xA; }

  • $(tr). find(". classdatddoicon"). Empty(); $(tr). find(". classdatddoicon"). html("<a href='#'>remove</a>"); ai you inform the html of the link you want to appear

  • $(tr). find(". classdatddoicon"). Empty(); $(tr). find(". classdatddoicon"). html("<a href='#'>remove</a>"); ai you inform the html of the link you want to appear or when the page loads you print the two links only by hiding one and showing the other, then when you run this function you just change the css of the button like this $(tr). find(". classdatddoicon > . iconactivate"). Hide(); $(tr). find(". classdatddoicon > . iconremover"). show(); and in Else does the opposite process. Remembering that the on link has q have the iconon class and the remove iconremove.

  • I put it like this $(tr).find(".ativar").empty(); $(tr).find(".banir").html("<a href='#'>remover</a>"); but it didn’t work. If you prefer, I will mark your answer as correct referring to the previous question and open another question on this subject @Antony Alkmim

  • Inside IF`, how do I print one icon and hide the other? I think this way it would be easier.

Show 12 more comments

Browser other questions tagged

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