如何实现每个table内<tr>的data-count计数器独立重置？

当前你的jQuery脚本会在所有table之间持续累加计数器，导致不同table的的data-count属性连续递增。要实现每个独立table内的从1开始单独计数，只需调整计数器的作用域：

原代码 #

JavaScript #

$(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);
 });
});
});

HTML #

<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>

修改后的代码 #

JavaScript #

$(document).ready(function() { 
  $("table").each(function() {
    // 每个table处理前重置计数器为1
    let counter = 1;
    $(this).find('tbody tr').each(function() {
      $(this).attr('data-count', counter);
      counter++;
    });
  });
});

关键调整说明 #

• 将counter变量从全局作用域移到$("table").each()的回调内部，确保处理每个新table时，计数器都会从1重新开始。
• 遍历table内的时，直接为元素赋值并递增计数器，实现每个table内部的独立计数逻辑。

内容的提问来源于stack exchange，提问作者Houghtonator