0

Preciso alterar a cor de um botão de uma lista de produtos. Porém, recebo em uma variavel uma outra lista com o id do produto somente do usuario logado. Estrutura que recebo :

[ 2, 7, 18, 21] // são os id dos produtos do usuário logado

Baseado nisso, eu queria saber como posso alterar, usando JQuery a cor do botão da lista abaixo, conforme o id do produto da lista abaixo, seja igual a lista da estrutura acima.

Minha lista de produtos é:

<table id="produtos">
            <thead>
                <tr>
                   <th>Nome</th>
                   <th>Usuário</th>
                   <th>Quantidade</th>
               </tr>
            </thead
                <tbody>
                    <c:forEach items="${produtos}" var="p">
                      <tr>
                        <td>${p.nome }</td>
                        <td>${p.usuario.nome }</td>
                        <td>${p.quantidade}</td>
                        <td>
                           <form id="testeForm" action="<c:url value="/atualizaQuantidade"/>" method="post" >
                           <input type="hidden" name="produto.cod" id="cod" value="${p.cod}" />                                                           
       <button type="submit" class="btn btn-primary"></button>            
                                 </form>
                                </div>
                               </td>
                              </tr>
                             </c:forEach>                                        
                         </tbody>
                           </table>

Coincidindo os "Id", mudar a cor do botão. Minha tabela então exibe o nome do produto, o nome do usuário e quantidade. Coloquei um botão pra atualizar, porém eu queria que ele ficasse com uma cor diferente caso o usuário responsável por aquele produto estivesse logado.

Exemplo: usuário com id 7 logado, somente os produtos dele o botão ficasse na cor verde (exemplo), não sendo dele, permancesse a cor atual do botão.

Grata

2
  • 1
    o conteúdo que você postou ainda é muito pouco para elaborar uma resposta ideal para a sua pergunta, inclua o seu html e js. Commented 13/12/2017 às 17:24
  • Leandro, coloquei o que você pediu e acrescentei mais informações. Grata por me ajudar.
    – AmandaRJ
    Commented 13/12/2017 às 19:31

3 Respostas 3

2

Eu costumo colocar o ID na linha. Assim eu posso ter mais controle sobre o DOM.

Ao passo que se colocasse o ID em um campo Hidden, dá muito trabalho manual tratar o DOM.

Veja que no TR de cada linha eu coloquei um ID: produto-ID.

No jQuery eu pego esse ID e tiro a palavra produto- para poder usar apenas o ID e comparar com a lista que está vindo.

Espero que seja de ajuda pelo menos o conceito.

$(document).ready(function(){
  // Valores que você recebe
  var listaProdutos = [ 1, 4, 23 ];
  var lista        = $("#listaProdutos").children('tr');
  
  $.each(lista, function(i, v){
      var linha = $(v);
      var idProduto = parseInt(linha.attr('id').replace('produto-', ''));
      if(listaProdutos.indexOf(idProduto) > -1){
        linha.find('span.update').addClass('active');
      }
  });
});
.update{
  font-weight: bolder;
}

.update.active{
  background-color: #00FF00;
  color: #FFFFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="produtos">
  <thead>
    <tr>
      <th>Nome</th>
      <th>Usuário</th>
      <th>Quantidade</th>
    </tr>
  </thead>
  <tbody id="listaProdutos">
    <tr id="produto-25">
      <td>Diego</td>
      <td>diego.souza</td>
      <td>20</td>
      <td><input type="text"> <span class="update">Atualizar</span></td>
    </tr>
    <tr id="produto-23">
      <td>Diego</td>
      <td>diego.souza</td>
      <td>20</td>
      <td><input type="text"> <span class="update">Atualizar</span></td>
    </tr>
    <tr id="produto-4">
      <td>Diego</td>
      <td>diego.souza</td>
      <td>20</td>
      <td><input type="text"> <span class="update">Atualizar</span></td>
    </tr>
  </tbody>
</table>

5
  • codepen.io/anon/pen/WdvrNE Commented 14/12/2017 às 12:10
  • 1
    e para usar isso: $(this).toggleClass('btn-success'); ? Estou entrando na discussão, pois acho que vou precisar disso no futuro também. Commented 14/12/2017 às 12:27
  • Isso você usan quando precisa trocar de classe no mesmo objeto. Acho que para o que você precisa agora não é necessário. Você pode usar isso para abrir e fechar um menu, por exemplo. Commented 14/12/2017 às 13:51
  • Boa noite. O seu código funcionou corretamente e como eu preciso. Porém, estou ajustando ao inves de mostrar o css que você acrescentou, eu colocar a mudança do botão mesmo. Peguei essa parte: $(this).toggleClass('btn-success'); e coloquei no seu código, mas não funcionou, como eu poderia fazer isso funcionar no seu código? Grata pela ajuda.
    – AmandaRJ
    Commented 14/12/2017 às 22:44
  • Eu não entendi bem o que você precisa fazer com essa função. Pode explicar com mais detalhes? Commented 15/12/2017 às 10:15
1

Segue uma resposta um tanto genérica, seria legal você editar a sua pergunta passando mais detalhes do seu problema e estrutura de html e javascript.

$(document).ready(function(){
  //valores que você recebe
  var listaProdutos = [ 2, 7, 18, 21];
  
$("a[href*='edita?cod=']").each(function(){
      
      //recupera o id do produto pela sua datatable
      var idProduto = parseInt($(this).attr('href').match(/\d+/)[0]);      
      
      //verifica se o id está na lista de produtos
      if(listaProdutos.indexOf(idProduto) >= 0)
      { 
        //manipula o elemento da forma que você quiser       
        $(this).toggleClass('btn-success');
      }
   });
});
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>id do produto</td>
    <td>usuario</td>
    <td>quantidade</td>
    <td>
      <a href="edita?cod=1" class="btn btn-success btn-xs" title="Editar">
        <span class="glyphicon glyphicon-edit">
      </span>
      </a>
    </td>                                      
  </tr>
  <tr>
    <td>id do produto</td>
    <td>usuario</td>
    <td>quantidade</td>
    <td>
      <a href="edita?cod=2" class="btn btn-success btn-xs" title="Editar">
        <span class="glyphicon glyphicon-edit">
      </span>
      </a>
    </td>                                      
  </tr>
</table>

2
  • Leandro, alterei como voce pediu. Então eu tenho um campo input que é preenchido com o id do produto. Esse input tem um id="cod"... estou querendo que seja comparado o valor da lista com esse campo id="cod", pegando o valor do input e fazendo a comparação. Se coincidir, alterar a cor do botão. Estou estudando seu código. Grata
    – AmandaRJ
    Commented 13/12/2017 às 15:31
  • consegui fazer funcionar. Porém ao inves de usar: $("a[href*='edita?cod=']").each(function(){ , queria usar o cod do input type hidden . Como eu poderia modificar sua sugestão, baseada na tabela que modifiquei?
    – AmandaRJ
    Commented 13/12/2017 às 21:07
0

$(document).ready(function(){
  //valores que você recebe
  var listaProdutos = [ 2, 7, 18, 21];
  
$("#cod").each(function(){
      
      //recupera o id do produto pela sua datatable
      var idProduto = parseInt($(this).attr('href').match(/\d+/)[0]);      
      
      //verifica se o id está na lista de produtos
      if(listaProdutos.indexOf(idProduto) >= 0)
      { 
        //manipula o elemento da forma que você quiser       
        $(this).toggleClass('btn-success');
      }
   });
});
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>id do produto</td>
    <td>usuario</td>
    <td>quantidade</td>
    <td>
      <td>
                       <form id="testeForm" action="<c:url value="/atualizaQuantidade"/>" method="post" >
                       <input type="hidden" name="produto.cod" id="cod" value="${p.cod}" />                                                           
   <button type="submit" class="btn btn-primary"></button>  
    </td>                                      
  </tr>
  <tr>
    <td>id do produto</td>
    <td>usuario</td>
    <td>quantidade</td>
                                     
  </tr>
</table>

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 .