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 atributodata-saldo
vindo carregado com valor0.00
, supondo que ao clicar no botãocheck
ele mude o valor deste atributo para 10, como posso fazer, tentei da forma que está nojs
dosnippet
, mas não alterou.
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.