1

Tenho a seguinte tabela:

var saldo = 10;
$(".saldo").click(function(e){
  e.preventDefault();
  $(this).closest('tr').find('td[data-saldo]').html("10.00");//setando o valor da coluna
  $(this).closest('tr').find('td[data-saldo]').data("saldo", "10.00");//setando o valor do atributo
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Marca</th>
      <th scope="col">Valor</th>
      <th><button class="btn btn-sm btn-secondary">Check</button></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td data-saldo="0.00">0.00</td>
      <td><button class="btn btn-sm btn-secondary saldo">Check</button></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td data-saldo="0.00">0.00</td>
      <td><button class="btn btn-sm btn-secondary saldo">Check</button></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td data-saldo="0.00">0.00</td>
      <td><button class="btn btn-sm btn-secondary saldo">Check</button></td>
    </tr>
  </tbody>
</table>

e note que a td correspondente ao valor possui um atributo data-saldo vindo carregado com valor 0.00, supondo que ao clicar no botão check ele mude o valor deste atributo para 10, como posso fazer, tentei da forma que está no js do snippet, mas não alterou.

5
  • O valor foi alterado pra 10 como você pediu
    – Azzi
    Commented 3/02/2020 às 19:33
  • Entao mas se clicar com o botao direito do mouse para checar o valor não está alterado, eu preciso que altere o valor no atributo também.
    – WMomesso
    Commented 3/02/2020 às 19:35
  • Já tentou $(element).attr("data-saldo","10.00")?
    – Azzi
    Commented 3/02/2020 às 19:41
  • Então, eu respondi e aqui deu certo
    – Azzi
    Commented 3/02/2020 às 19:46
  • O data no JQuery não reflete as alterações como um atributo do html, apenas com JS puro isso acontece. Também deve minimizar as pesquisas no DOM que faz, que no caso tem duas iguais seguidas desnecessariamente. Pode fazer isto quer encadeando (dependo dos métodos chamados) ou memorizando.
    – Isac
    Commented 4/02/2020 às 10:38

1 Resposta 1

2

Foi basicamente o que eu cometei, com attr() deu certo

var saldo = 10;
$(".saldo").click(function(e){
  e.preventDefault();
  $(this).closest('tr').find('td[data-saldo]').html("10.00");//setando o valor da coluna
  $(this).closest('tr').find('td[data-saldo]').attr("data-saldo", "10.00");//setando o valor do atributo
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Marca</th>
      <th scope="col">Valor</th>
      <th><button class="btn btn-sm btn-secondary">Check</button></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td data-saldo="0.00">0.00</td>
      <td><button class="btn btn-sm btn-secondary saldo">Check</button></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td data-saldo="0.00">0.00</td>
      <td><button class="btn btn-sm btn-secondary saldo">Check</button></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td data-saldo="0.00">0.00</td>
      <td><button class="btn btn-sm btn-secondary saldo">Check</button></td>
    </tr>
  </tbody>
</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 .