使用Jquery实现输入框name属性数组索引自增

嘿，我来帮你搞定这个问题！你现在的代码核心问题是拼接HTML字符串时，没有把变量i的实际数值插入到name属性里，而是直接写了paramKey[i]，导致新添加的输入框name都是固定的字符串paramKey[i]，而不是带递增索引的paramKey[1]、paramKey[2]这类格式。

问题分析 #

你当前的代码中，这一行的字符串拼接有问题：

$("#paramsFields").append('<tr valign="top"><th></th><td><input style="margin-left: 187px" type="text" class="code" id="paramFieldName" name="paramKey[i]" value=""/> &nbsp; <input type="text" class="code" id="paramFieldValue" name="paramValue[i]" value=""/> &nbsp;<a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');

这里的paramKey[i]里的i只是字符串的一部分，不会被解析成变量的数值，所以需要把变量i的值动态插入到字符串中。另外还要注意：不要重复使用相同的id，HTML里的id必须是唯一的，所以新行的输入框不能再用paramFieldName和paramFieldValue这些重复的id。

修改后的完整代码 #

下面是修复后的代码，我会标注关键修改点：

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="paramsFields">
  <tr valign="top">
    <td scope="row"><label for="paramFieldName-0">Params</label></td>
    <td>
      <input style="margin-left: 187px" type="text" class="code" id="paramFieldName-0" name="paramKey[0]" placeholder="Param Name" />
      &nbsp;
      <input type="text" class="code" id="paramFieldValue-0" name="paramValue[0]" value="" placeholder="Param Value" />
      &nbsp;
      <a href="javascript:void(0);" class="addCF">Add</a>
    </td>
  </tr>
</table>

jQuery部分

var i = 1; 
$(document).ready(function() {
  $(".addCF").click(function() {
    // 用模板字符串（` `）来插入变量i的数值，或者用字符串拼接也可以
    $("#paramsFields").append(`<tr valign="top">
      <th></th>
      <td>
        <input style="margin-left: 187px" type="text" class="code" id="paramFieldName-${i}" name="paramKey[${i}]" value=""/>
        &nbsp;
        <input type="text" class="code" id="paramFieldValue-${i}" name="paramValue[${i}]" value=""/>
        &nbsp;
        <a href="javascript:void(0);" class="remCF">Remove</a>
      </td>
    </tr>`);
    i++; // 每次添加后索引自增
  });

  $("#paramsFields").on('click', '.remCF', function() {
    $(this).closest('tr').remove(); // 用closest()比parent().parent()更简洁健壮
  });
});

关键修改说明 #

• 动态插入索引值：使用ES6模板字符串（反引号`）包裹HTML内容，用${i}把变量i的数值插入到name和id中，这样新行的name就会变成paramKey[1]、paramKey[2]，以此类推。如果你的环境不支持ES6模板字符串，也可以用传统的字符串拼接方式："paramKey[" + i + "]"。
• 唯一id：把输入框的id改成paramFieldName-${i}、paramFieldValue-${i}，保证每个元素的id都是唯一的，符合HTML规范（重复id会导致JS选择器出错）。
• 简化删除逻辑：用closest('tr')代替parent().parent()，代码更简洁，而且当DOM结构变化时更不容易出错。

这样修改后，点击Add按钮添加的新行，输入框的name属性就会带有递增的数组索引啦！

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