Increment the data in a cell by 1 when clicked

Question

The code I used to increment the cell value. But instead of +1 only it will do like this

0 1 3 6 10 15 21 28...

here is my code:

function incNumber(){
 var qtyValue = 0;
 var table = $('#example').DataTable();
 $('#example tbody').on('click', 'td', function(){
    qtyValue = parseInt(table.cell(this, 5).data());
    qtyValue++;
    table.cell(this, 5).data(qtyValue);
});
}

This is a guess, because there is no [mre] - but you get that exact sequence if you do something like this: `0`. You have multiple cascading `onClick` events because of this. You can solve this by following the approach provided in [Passing 'this' to an onclick event](https://stackoverflow.com/questions/12812893/passing-this-to-an-onclick-event). — andrewJames, Jan 01 '21 at 23:31

score 0 · Accepted Answer · answered Jan 02 '21 at 03:59

What andrewjames said. You must be calling incNumber multiple times. If you set it up once, your code works fine.

$(document).ready(function() {
  var qtyValue = 0;
  var table = $('#example').DataTable();
  $('#example tbody').on('click', 'td', function() {
    qtyValue = parseInt(table.cell(this, 3).data());
    qtyValue++;
    table.cell(this, 3).data(qtyValue);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="example" class="display nowrap dataTable dtr-inline collapsed" style="width: 100%;" role="grid" aria-describedby="example_info">
  <thead>
    <tr role="row">
      <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 120px;" aria-sort="ascending" aria-label="Name: activate to sort column descending" data-ol-has-click-handler="">Name</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 189px;" aria-label="Position: activate to sort column ascending" data-ol-has-click-handler="">Position</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 89px;" aria-label="Office: activate to sort column ascending" data-ol-has-click-handler="">Office</th>
      <th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 35px;" aria-label="Age: activate to sort column ascending" data-ol-has-click-handler="">Age</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 80px;" aria-label="Start date: activate to sort column ascending" data-ol-has-click-handler="">Start date</th>
      <th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="Salary: activate to sort column ascending" data-ol-has-click-handler="">Salary</th>
    </tr>
  </thead>
  <tbody data-ol-has-click-handler="">
    <tr class="odd">
      <td tabindex="0" class="sorting_1">Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td class=" dt-body-right">33</td>
      <td>2008/11/28</td>
      <td class=" dt-body-right" style="display: none;">$162,700</td>
    </tr>
    <tr class="even">
      <td class="sorting_1" tabindex="0">Angelica Ramos</td>
      <td>Chief Executive Officer (CEO)</td>
      <td>London</td>
      <td class=" dt-body-right">47</td>
      <td>2009/10/09</td>
      <td class=" dt-body-right" style="display: none;">$1,200,000</td>
    </tr>
    <tr class="odd">
      <td tabindex="0" class="sorting_1">Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td class=" dt-body-right">66</td>
      <td>2009/01/12</td>
      <td class=" dt-body-right" style="display: none;">$86,000</td>
    </tr>
    <tr class="even">
      <td class="sorting_1" tabindex="0">Bradley Greer</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td class=" dt-body-right">41</td>
      <td>2012/10/13</td>
      <td class=" dt-body-right" style="display: none;">$132,000</td>
    </tr>
    <tr class="odd">
      <td class="sorting_1" tabindex="0">Brenden Wagner</td>
      <td>Software Engineer</td>
      <td>San Francisco</td>
      <td class=" dt-body-right">28</td>
      <td>2011/06/07</td>
      <td class=" dt-body-right" style="display: none;">$206,850</td>
    </tr>
    <tr class="even">
      <td tabindex="0" class="sorting_1">Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td class=" dt-body-right">61</td>
      <td>2012/12/02</td>
      <td class=" dt-body-right" style="display: none;">$372,000</td>
    </tr>
    <tr class="odd">
      <td class="sorting_1" tabindex="0">Bruno Nash</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td class=" dt-body-right">38</td>
      <td>2011/05/03</td>
      <td class=" dt-body-right" style="display: none;">$163,500</td>
    </tr>
    <tr class="even">
      <td class="sorting_1" tabindex="0">Caesar Vance</td>
      <td>Pre-Sales Support</td>
      <td>New York</td>
      <td class=" dt-body-right">21</td>
      <td>2011/12/12</td>
      <td class=" dt-body-right" style="display: none;">$106,450</td>
    </tr>
    <tr class="odd">
      <td class="sorting_1" tabindex="0">Cara Stevens</td>
      <td>Sales Assistant</td>
      <td>New York</td>
      <td class=" dt-body-right">46</td>
      <td>2011/12/06</td>
      <td class=" dt-body-right" style="display: none;">$145,600</td>
    </tr>
    <tr class="even">
      <td tabindex="0" class="sorting_1">Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td class=" dt-body-right">22</td>
      <td>2012/03/29</td>
      <td class=" dt-body-right" style="display: none;">$433,060</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th rowspan="1" colspan="1">Name</th>
      <th rowspan="1" colspan="1">Position</th>
      <th rowspan="1" colspan="1">Office</th>
      <th class="dt-body-right" rowspan="1" colspan="1">Age</th>
      <th rowspan="1" colspan="1">Start date</th>
      <th class="dt-body-right" rowspan="1" colspan="1" style="display: none;">Salary</th>
    </tr>
  </tfoot>
</table>

I have another buttons in datatable and I use your code and modified it. Thanks alot! — renge, Jan 02 '21 at 19:21

Increment the data in a cell by 1 when clicked

1 Answers1