Change the color of a button when comparing 2 attributes of a list with JQuery

Question

Change the color of a button when comparing 2 attributes of a list with JQuery

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

0

I need to change the color of a button in a product list. However, I get in a variable another list with the product id only from the logged in user. Structure I get:

[2, 7, 18, 21] // are the user ids of the logged in user

Based on this, I wanted to know how I can change, using JQuery the color of the button in the list below, according to the product id of the list below, is equal to the list of the structure above.

My product list is:

<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>

By matching the "Id", change the color of the button. My table then displays the product name, user name, and quantity. I put a button to update, but I wanted it to have a different color if the user responsible for that product was logged in.

Example: user with id 7 logged in, only his products the button would be in the green color (example), not being his, the current color of the button remained.

Thank you

jquery jquery-datatables

asked by anonymous 13.12.2017 / 14:31

3 answers

Retrieve label value from a select HTML How to put this JS alert to appear when entering the page

score 2 · Answer 1

I usually put the ID on the line. So I can have more control over the DOM.

While putting the ID in a Hidden field, it takes a lot of manual work to handle the DOM.

See that in the TR of each row I put an ID: produto-ID .

In jQuery I get this ID and hit the word produto- to be able to use only the ID and compare with the list that is coming.

I hope it helps at least the concept.

$(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><tableid="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>

score 1 · Answer 2

Here is a general answer, it would be nice if you edit your question by passing more details of your problem and html and javascript structure.

$(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>iddoproduto</td><td>usuario</td><td>quantidade</td><td><ahref="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>

score 0 · Answer 3

$(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>iddoproduto</td><td>usuario</td><td>quantidade</td><td><td><formid="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>