JavaScript动态生成行中变量值未在元素ID更新问题求助

嘿，我一眼就看出问题啦——你在拼接HTML字符串的时候，变量i的写法不对，导致它没有被解析成实际的数值，而是直接作为字符串的一部分被输出了。咱们来快速修复这个问题：

问题根源 #

你当前的代码里，像id='upcList'+i这种写法是被包裹在双引号里面的，JavaScript会把整个'upcList'+i当成字符串的一部分，最终生成的元素ID是upcList+i（字面量），而不是你期望的upcList1、upcList2这类带递增数字的ID。

两种解决方案 #

方案1：使用ES6模板字符串（推荐） #

模板字符串用反引号（`）包裹，变量可以通过${变量名}直接嵌入，写法更简洁也更不容易出错。修改后的代码如下：

var i = 0;
function insRow() {
  i++;
  let newRowContent = `
    <tr>
      <td>
        <select class='form-control' id='upcList${i}'>
          <option selected='selected'>Select</option>
        </select>
      </td>
      <td><input id='tdesc${i}' type='number' class='form-control' /></td>
      <td><input id='tamnt${i}' type='number' class='form-control' /></td>
      <td><input id='trem${i}' type='number' class='form-control' /></td>
      <td><input type='button' style='margin-left:2%;' value='Add' id='abc' class='btnrowvalue3' onclick='insRow()' /></td>
    </tr>
  `;
  $("#ipcelltbll tbody").append(newRowContent);
}

方案2：修正传统字符串拼接 #

如果你需要兼容不支持ES6的环境，可以把变量从引号中分离出来，用+完成正确的拼接：

var i = 0;
function insRow() {
  i++;
  let newRowContent = "<tr>" +
    "<td> <select class='form-control' id='upcList" + i + "'><option selected='selected'>Select</option></select></td>" +
    "<td><input id='tdesc" + i + "' type='number' class='form-control' /></td>" +
    "<td><input id='tamnt" + i + "' type='number' class='form-control' /></td>" +
    "<td><input id='trem" + i + "' type='number' class='form-control' /></td>" +
    "<td><input type='button' style='margin-left:2%;' value='Add' id='abc' class='btnrowvalue3' onclick='insRow()' /></td>" +
    "</tr>";
  $("#ipcelltbll tbody").append(newRowContent);
}

验证方法 #

修改完成后，点击Add按钮生成新行，然后打开浏览器的开发者工具（F12），查看生成的元素，你会发现每个元素的ID已经变成upcList1、tdesc1、tamnt1这样带递增数字的形式了，变量i的值成功生效啦！

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