Search code examples
javascriptjqueryhtml-tablecounter

Counting each [tr] in each [table] but resetting the counter++ in each [table]


I already have a working script that adds a 'data-count' to every row within each table. However, the counter carries over the count to each table.

I only need to reset the count on each individual table for each row.

$(document).ready( function() { 
 var counter = 0;
 $("table").each(function(e) {
   $(this).find('tbody tr').each(function(e) {
  counter++;
  var self = $(this);
  self.attr('data-count', +counter);
 });
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
  <tr><td>Line 1</td></tr>
  <tr><td>Line 2</td></tr>
  <tr><td>Line 3</td></tr>
  <tr><td>Line 4</td></tr>
</tbody>
</table>

<table>
<tbody>
  <tr><td>Line 1</td></tr>
  <tr><td>Line 2</td></tr>
  <tr><td>Line 3</td></tr>
  <tr><td>Line 4</td></tr>
</tbody>
</table>

<table>
<tbody>
  <tr><td>Line 1</td></tr>
  <tr><td>Line 2</td></tr>
  <tr><td>Line 3</td></tr>
  <tr><td>Line 4</td></tr>
</tbody>
</table>

<table>
<tbody>
  <tr><td>Line 1</td></tr>
  <tr><td>Line 2</td></tr>
  <tr><td>Line 3</td></tr>
  <tr><td>Line 4</td></tr>
</tbody>
</table>


Solution

  • You just need to declare count before table iteration

    $(document).ready( function() { 
     $("table").each(function(e) {
       var counter = 0;
       $(this).find('tbody tr').each(function(e) {
      counter++;
      var self = $(this);
      self.attr('data-count', +counter);
     });
    });
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table>
    <tbody>
      <tr><td>Line 1</td></tr>
      <tr><td>Line 2</td></tr>
      <tr><td>Line 3</td></tr>
      <tr><td>Line 4</td></tr>
    </tbody>
    </table>
    
    <table>
    <tbody>
      <tr><td>Line 1</td></tr>
      <tr><td>Line 2</td></tr>
      <tr><td>Line 3</td></tr>
      <tr><td>Line 4</td></tr>
    </tbody>
    </table>
    
    <table>
    <tbody>
      <tr><td>Line 1</td></tr>
      <tr><td>Line 2</td></tr>
      <tr><td>Line 3</td></tr>
      <tr><td>Line 4</td></tr>
    </tbody>
    </table>
    
    <table>
    <tbody>
      <tr><td>Line 1</td></tr>
      <tr><td>Line 2</td></tr>
      <tr><td>Line 3</td></tr>
      <tr><td>Line 4</td></tr>
    </tbody>
    </table>