Javascript 如何在每组输入中动态添加数组Id

我正在使用添加和删除按钮动态生成一组字段

我希望组id作为数组组中的输入名称数组标识符， 就像我单击add时一样，它会添加一组输入字段

应该是这样的：

<input name="daydetails[1][dayno]">
<textarea name="daydetails[1][activity]"></textarea>

<input name="daydetails[2][dayno]">
<textarea name="daydetails[2][activity]"></textarea>

---

要解决此问题，可以使用和函数。我建议您使用

按钮

而不是

a

。使用

超链接

可以，但在语义上不正确。FYI

die

折旧，自1.9版起已删除。因此，这里不需要它，

$（…）。点击（'click'，…）

即可。你可以看到一个完整的，我用按钮代替超链接

HTML示例

<div id="inputsContainer" class="col-md-10">
  <input type="text" placeholder="Day No" name="daydetails[][dayno]" />
</div>

<div id="textareasContainer" class="col-md-10">
  <textarea class="tinymce-enabled-message-new" cols="40" rows="3" name="daydetails[][activity]">
    Test Input
  </textarea>
</div>
<div>
  <button onclick="onAddClick()">Add</button>
  <button onclick="onRemoveClick()">Remove</button>
</div>

测试输入
添加
去除

Javascript

<script type="text/javascript">
  const dayDetails = [{ dayno: "dayno-0", activity: "activity-0" }];

  function generateInput(name) {
    return '<input type="text" placeholder="Day No" name="' + name + '" />';
  }

  function generateTextarea(name) {
    return (
      '<textarea class="foo-bar" cols="40" rows = "3" name="' + name + '">'
    );
  }

  function onRemoveClick() {
    const item = dayDetails.pop();
    const dayno = item.dayno;
    const activity = item.activity;

    try {
      $('input[name=' + dayno + ']').remove();
      $('textarea[name=' + activity + ']').remove();
    } catch (e) { }
  }

  function onAddClick() {
    const dayno = dayDetails.length;
    const activity = 'activity-' + dayDetails.length;
    dayDetails.push({ dayno: dayno, activity: activity });
    $("#inputsContainer").append(generateInput(dayno));
    $("#textareasContainer").append(generateTextarea(activity));
  }
</script>

const dayDetails=[{dayno:“dayno-0”，activity:“activity-0”}]；
函数生成器输入（名称）{
返回“”；
}
函数generateTextarea（名称）{
返回(
''
);
}
函数onRemoveClick（）{
const item=dayDetails.pop（）；
const dayno=item.dayno；
const activity=item.activity；
试一试{
$（'input[name='+dayno+']'）。删除（）；
$（'textarea[name='+activity+']'）。删除（）；
}捕获（e）{}
}
函数onAddClick（）{
const dayno=daydestails.length；
const activity='activity-'+dayDetails.length；
推送（{dayno:dayno，activity:activity}）；
$（“#inputsContainer”）.append（generateInput（dayno））；
$（“#textareasContainer”）.append（generateTextarea（activity））；
}

<div id="inputsContainer" class="col-md-10">
  <input type="text" placeholder="Day No" name="daydetails[][dayno]" />
</div>

<div id="textareasContainer" class="col-md-10">
  <textarea class="tinymce-enabled-message-new" cols="40" rows="3" name="daydetails[][activity]">
    Test Input
  </textarea>
</div>
<div>
  <button onclick="onAddClick()">Add</button>
  <button onclick="onRemoveClick()">Remove</button>
</div>

<script type="text/javascript">
  const dayDetails = [{ dayno: "dayno-0", activity: "activity-0" }];

  function generateInput(name) {
    return '<input type="text" placeholder="Day No" name="' + name + '" />';
  }

  function generateTextarea(name) {
    return (
      '<textarea class="foo-bar" cols="40" rows = "3" name="' + name + '">'
    );
  }

  function onRemoveClick() {
    const item = dayDetails.pop();
    const dayno = item.dayno;
    const activity = item.activity;

    try {
      $('input[name=' + dayno + ']').remove();
      $('textarea[name=' + activity + ']').remove();
    } catch (e) { }
  }

  function onAddClick() {
    const dayno = dayDetails.length;
    const activity = 'activity-' + dayDetails.length;
    dayDetails.push({ dayno: dayno, activity: activity });
    $("#inputsContainer").append(generateInput(dayno));
    $("#textareasContainer").append(generateTextarea(activity));
  }
</script>