How to change the value of an attribute within a`TD` using jquery?

Asked

Viewed 129 times

1

I have the following table:

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>

and note that the td corresponding to the value has an attribute data-saldo coming loaded with value 0.00, Suppose by clicking the button check it changes the value of this attribute to 10, as I can do, tried the way it is in the js of snippet, but did not change.

javascript jquery

  • The value was changed to 10 as you requested

  • So if you click with the right mouse button to check the value is not changed, I need you to change the value in the attribute as well.

  • Already tried $(element). attr("balance date","10.00")?

  • So I answered and here it worked

  • The data in Jquery does not reflect changes as an attribute of html, only with pure JS it happens. It should also minimize the research in the DOM it does, which in this case has two equal unnecessarily followed. You can do this either by chaining (depending on so-called methods) or memorizing.

1 answer

2


That’s basically what I committed, with attr() it worked 

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>

Browser other questions tagged javascript jquery

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