求助：家庭游戏计分器无法自动为动态添加的行编号

嘿，作为编程新手能搞定动态加行和自动求和已经超棒了！我来帮你解决剩下的两个小问题：自动添加行号，还有修复JSFiddle里的功能异常。

1. 自动添加行号的解决方案 #

目前你的初始表格行没有填写行号，新增行时也没生成对应编号，我们可以通过维护一个计数器轻松搞定：

修改步骤： #

• 先给HTML里的初始两行补上行号，把空的<td class="round"></td>分别改成<td class="round">1</td>和<td class="round">2</td>。
• 在JS里初始化一个计数器，因为已经有2行，所以从3开始计数。
• 点击New Round按钮时，用计数器填充新行的行号，然后让计数器自增，为下一行做准备。

修改后的JS核心代码：

$(document).ready(function(){ 
  var gameRounds = [1, 2]; 
  // 初始化行号计数器，从3开始
  let nextRoundNumber = 3;

  $(document).on("keyup", ".add", function() { 
    var sum = 0; 
    $(".add").each(function(){ 
      sum += +$(this).val() || 0; // 处理空输入，避免出现NaN
    }); 
    $("#sum").text(sum); 
  }); 

  var newRound = $('#newRound'); 
  newRound.click(function(){ 
    // 用模板字符串生成带行号的新行
    $('.totals').before(`
      <tr>
        <td class='round'>${nextRoundNumber}</td>
        <td class='p1'><input class='add' id='r${nextRoundNumber}' type='number' name='r${nextRoundNumber}'></td>
      </tr>
    `); 
    nextRoundNumber++;
    console.log(gameRounds); 
  }); 
});

2. JSFiddle功能异常的原因 #

你说按钮和计算器在JSFiddle里不工作，但本地和CodePen正常，这是因为你JS代码里的HTML标签用了HTML实体转义（比如<tr>而不是<tr>）。在JS字符串里不需要转义这些标签，浏览器会把转义后的内容当作纯文本渲染，而不是解析成真正的HTML元素，所以新增的不是可交互的输入框，自然没法触发求和功能。

只需要把JS里的<改成<，>改成>，用正常的HTML标签字符串就可以了，就像上面修改后的代码那样。

完整整合代码 #

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="update">
  <thead>
    <th class="round">Round</th>
    <th class="p1">player1</th>
  </thead>
  <tr class="r1">
    <td class="round">1</td>
    <td class="p1">
      <input class="add" id="r1" type="number" name="r1">
    </td>
  </tr>
  <tr>
    <td class="round">2</td>
    <td class="p1">
      <input class="add" id="r2" type="number" name="r2">
    </td>
  </tr>
  <tfoot class="totals">
    <td class="round">total</td>
    <td class="p1">
      <span id="sum"></span>
    </td>
  </tfoot>
</table>
<div class="btnStyle">
  <button id="newRound">New Round</button>
</div>

CSS #

table, th, td { border: 1px solid black; }
table { width: 15%; }
.p1 { background: lightblue; }
/* .p2 { background: lime; } */
/* .p3 { background: orange; } */
.round { width: 3em; margin: auto; text-align: center; }

JavaScript #

$(document).ready(function(){ 
  var gameRounds = [1, 2]; 
  let nextRoundNumber = 3;

  $(document).on("keyup", ".add", function() { 
    var sum = 0; 
    $(".add").each(function(){ 
      sum += +$(this).val() || 0;
    }); 
    $("#sum").text(sum); 
  }); 

  var newRound = $('#newRound'); 
  newRound.click(function(){ 
    $('.totals').before(`
      <tr>
        <td class='round'>${nextRoundNumber}</td>
        <td class='p1'><input class='add' id='r${nextRoundNumber}' type='number' name='r${nextRoundNumber}'></td>
      </tr>
    `); 
    nextRoundNumber++;
    console.log(gameRounds); 
  }); 
});

我还在求和逻辑里加了|| 0，这样输入框为空时不会出现NaN，体验更顺畅～

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