jQuery行号变量递增正常但动态追加的HTML行未使用更新值

问题原因 #

行HTML模板仅在页面初始化时生成了一次，此时rowNum值为1，模板内所有checkbox的索引就已经固定写死为1。后续点击新增按钮时，直接复用了这个提前生成的固定模板，没有用更新后的rowNum重新渲染模板，因此所有新增行的索引都和第一行一致，控制台打印的rowNum递增只代表变量本身更新了，没有同步到模板里。

修复方案 #

将行HTML的生成逻辑移到新增按钮的点击回调内部，每次新增行时都用当前最新的rowNum值重新生成HTML字符串。另外HTML规范要求id全局唯一，建议同步给所有元素的id加上rowNum后缀，避免后续元素选择、表单提交出现异常。

修正后JS代码 #

var rowNum = 1;
$(document).ready(function() {
  // 插入初始第一行
  insertNewRow();

  $(document).on('click', "#addmore", function() {
    rowNum++;
    insertNewRow();
    console.log(rowNum);
  });

  // 抽离公共的行生成插入方法
  function insertNewRow() {
    // 每次调用都用最新的rowNum拼接模板
    var html = '<tr> <td><input type="text" name="lName[]" id="lName_' + rowNum + '" ></td> <td><input type="text" name="fName[]" id="fName_' + rowNum + '" ></td> <td><input type="text" name="mName[]" id="mName_' + rowNum + '"></td> <td><input type="text" name="suffixName[]" id="suffixName_' + rowNum + '" ></td> <td> <select name="gender[]" id="gender_' + rowNum + '"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </td> <td><input type="date" name="birthday[]" id="birthday_' + rowNum + '" ></td> <td><input type="text" name="phoneNumber[]" id="phoneNumber_' + rowNum + '" ></td> <td> <select name="civilStatus[]" id="civilStatus_' + rowNum + '"> <option value="Single">Single</option> <option value="Married">Married</option> <option value="Widowed">Widowed</option> </select> </td> <td><input type="checkbox" name="isHeadOfFamily[' + rowNum + ']" id="isHeadOfFamily_' + rowNum + '" value="1"> </td> <td><input type="checkbox" name="isEmployed[' + rowNum + ']" id="isEmployed_' + rowNum + '" value="1"> </td> <td><input type="checkbox" name="isSelfEmployedInBusiness-[' + rowNum + ']" id="isSelfEmployedInBusiness_' + rowNum + '" value="1"> </td> <td><input type="checkbox" name="isSelfEmployedInInformalSector[' + rowNum + ']" id="isSelfEmployedInInformalSector_' + rowNum + '" value="1"> </td> <td><input type="checkbox" name="isSoloParent[' + rowNum + ']" id="isSoloParent_' + rowNum + '" value="1"> </td> <td><input type="checkbox" name="isSeniorCitizen[' + rowNum + ']" id="isSeniorCitizen_' + rowNum + '" value="1"> </td> <td><input type="checkbox" name="isPWD[' + rowNum + ']" id="isPWD_' + rowNum + '" value="1"> </td> <td> <select name="relationToHeadOfFamily[]" id="relationToHeadOfFamily_' + rowNum + '"> <option value="Spouse">Spouse</option> <option value="Child">Child</option> <option value="Sibling">Sibling</option> <option value="Parent">Parent</option> <option value="None">None</option> </select> </td> <td><button type="button" name="addmore" id="addmore">Add More</button></td><td><button type="button" name="remove" id="remove">Remove</button></td> </tr>';
    $("#table_input-people").append(html);
  }
});

HTML代码无需修改 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tbody id="table_input-people"></tbody>
</table>

补充说明：如果要实现删除行功能，不要用id绑定删除按钮的点击事件，改为用类选择器绑定，避免因id重复导致事件触发异常。

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