CODEWITHSUNDEEP
javascriptjqueryhtml-tablecounter
Houghtonator
Houghtonator

Reputation: 103

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>

Upvotes: 0

Views: 37

Answers (1)

flyingfox
flyingfox

Reputation: 13506

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>

Upvotes: 1

Related Questions