使用jQuery为表格新增行添加带编号类名的技术问题

嘿，我来帮你搞定这个需求！你的现有代码已经实现了新增行的淡入动画，但还缺少给TD元素添加递增编号类名的逻辑，而且按钮在<form>标签内会触发默认的表单提交行为（导致页面刷新，新增的行消失），得先把这个问题解决掉。下面是修改后的完整代码，我会一步步给你解释关键改动：

核心改动点 #

• 阻止按钮的默认表单提交行为，避免页面刷新丢失新增的行
• 获取当前表格的行数，动态计算新行的编号（初始有2行，新行从3开始递增）
• 生成带递增编号的类名，替换原有固定的类名

修改后的完整代码 #

<body>
  <form action="" method="post">
    <button>Добавить</button>
    <input type="submit" value="Подтвердить">
    <table>
      <tr>
        <td class='name_1'>ФИО</td>
        <td class='subj1_1'>1-ый предмет</td>
        <td class='subj2_1'>2-ой предмет</td>
        <td class='subj3_1'>3-ий предмет</td>
      </tr>
      <tr>
        <td class='name_2'>text</td>
        <td class='subj1_2'>text</td>
        <td class='subj2_2'>text</td>
        <td class='subj3_2'>text</td>
      </tr>
    </table>
  </form>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function(e){
        // 阻止表单默认提交，不然页面会刷新，新增的行就没了
        e.preventDefault();
        
        // 计算新行的编号：当前表格行数+1，初始2行，新行就是3，每次新增自动+1
        var newRowIndex = $("table tr").length + 1;
        
        // 用模板字符串动态生成带编号的类名，比传统拼接更清晰
        var newRow = `<tr>
          <td class='name_${newRowIndex}'>Text</td>
          <td class='subj1_${newRowIndex}'></td>
          <td class='subj2_${newRowIndex}'></td>
          <td class='subj3_${newRowIndex}'></td>
        </tr>`;
        
        $("table").append(newRow);
        // 链式调用简化动画代码
        $("tr:last").hide().fadeToggle(1000);
      });
    });
  </script>
</body>

细节解释 #

1. 阻止默认提交：e.preventDefault()是关键，因为按钮在表单里，默认点击会触发表单提交，页面刷新后新增的行就消失了，这一步能让新增的行保留下来。
2. 动态编号计算：$("table tr").length会获取当前表格里所有<tr>的数量，加1就是新行的编号，比如初始2行，新行就是3，下次新增就是4，完全自动递增。
3. 模板字符串的优势：用反引号`包裹HTML内容，可以直接把变量newRowIndex插入到类名中，写起来比传统的字符串拼接（用+连接）更直观，不容易出错。
4. 兼容旧环境的写法：如果你的项目不支持ES6模板字符串，也可以用传统拼接方式，效果一样：

var newRow = "<tr>" +
  "<td class='name_" + newRowIndex + "'>Text</td>" +
  "<td class='subj1_" + newRowIndex + "'></td>" +
  "<td class='subj2_" + newRowIndex + "'></td>" +
  "<td class='subj3_" + newRowIndex + "'></td>" +
"</tr>";

这样每次点击"Добавить"按钮，都会新增一行，每个TD的类名都会按name_3、subj1_3、name_4、subj1_4这样的顺序递增，完全符合你的需求。

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