使用jQuery动态添加不同ID文本框并填充数组值

嘿，我来帮你搞定这个问题！你需要动态生成带不同ID的文本框，并且把同一数组的值对应填充进去对吧？看我给你写个完整的解决方案：

1. 准备HTML容器 #

首先在页面中添加一个用来承载动态文本框的容器：

<div id="input-container"></div>

2. 编写jQuery核心逻辑 #

先定义好你要填充的目标数组（你可以替换成自己的业务数组），然后通过循环生成对应文本框并赋值：

$(document).ready(function() {
  // 示例数组，替换成你实际需要的数组即可
  const targetValues = ["第一项内容", "第二项内容", "第三项内容", "第四项内容"];
  
  // 获取存放文本框的容器
  const container = $("#input-container");

  // 循环数组，逐个创建并配置文本框
  targetValues.forEach((item, index) => {
    // 创建input元素，设置唯一ID、类型和对应值
    const dynamicInput = $("<input>")
      .attr("type", "text")
      .attr("id", `text-input-${index}`) // 用数组索引生成唯一ID
      .val(item); // 填充数组对应位置的值
    
    // 将文本框添加到容器，顺便加个换行让布局更清晰
    container.append(dynamicInput).append("<br>");
  });
});

3. 效果说明 #

这段代码会根据你的数组长度自动生成对应数量的文本框，每个文本框的ID是text-input-0、text-input-1……以此类推，每个框内会精准填充数组中对应索引的值，完全符合你期望的效果~

额外小提示 #

如果你的数组是从后端接口动态获取的，只需要把targetValues替换成你拿到的数组变量就行，逻辑完全通用。要是想给文本框加样式、占位符等属性，直接在创建input时用.addClass()或者.attr()补充即可。

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