如何克隆表格并多次更改其子代的ID? [英] How can I clone a form and change the id of its children more than just once?

问题描述

我一直在尝试克隆部分表格，该表格已成功完成.但是我需要处理数据，因此需要更改元素的子代的ID(输入，请选择ecc).我已经在网上浏览了一段时间，但对我来说并没有什么真正的用处，还因为我想更频繁地克隆元素，所以ID每次都应该更改.你能帮我吗?会很棒:

I have been trying to clone a section which is part of a form, which I have successfully completed. But I need to work with the data and so I need to change the ID's of the element's children (input, select ecc). I have been looking a while in the web but nothing really works for me, also because I would like to clone the element more often, also the ID should change then everytime. Can you help me with that? Would be great:

HTML:

<div class="input-form fcf-form-group">

  <div class="form only">
    <h3 class="fcf-h3">Room</h3>
    <div class="form-section">

      <div class="title-group">
        <label for="room" class="fcf-label">Room</label>
        <select name="room" id="room" required>
          <option value="double">Double</option>
          <option value="single">Single</option>
        </select>
      </div>
    </div>
  </div>

  <div class="form neighbour">

    <div class="title-group small">
      <label for="adults" class="fcf-label">Adults</label>
      <input type="number" id="adults" name="adults" min="1" max="5">
    </div>

    <div class="title-group small">
      <label for="child" class="fcf-label">Children</label>
      <input type="number" id="child" name="child" min="1" max="5">
    </div>

    <div class="title-group small">
      <label for="age" class="fcf-label">Age of the Child</label>
      <select name="age" id="age" required>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
  </div>
</div>
</div>

JQUERY:

$('#but_add').click(function () {

  // Create clone of <div class='input-form'>
  var newel = $('.input-form:last').clone();

  // Add after last <div class='input-form'>
  $(newel).insertAfter('.input-form:last');
});
})

推荐答案

此代码将克隆原始表单，并在的每个 id 和 for 属性中附加一个唯一的数字克隆，然后将克隆添加到容器的底部:

This code will clone the original form, append a unique number to each id and for attribute in the clone, and add the clone to the bottom of the container:

function cloneAndChangeIds(wrapper, text) {

  // clone the wrapper
  const clone = wrapper.cloneNode(true);

  // add text to the `for` attribute of every label
  const labels = Array.from(clone.querySelectorAll('label'));
  labels.forEach(label => {
    label.htmlFor += text;
  });

  // add text to the `id` attribute of every select and input 
  const items = Array.from(clone.querySelectorAll('select, input'));
  items.forEach(select => {
    select.id += text
  });

  return clone;
}

let iClone = 0;

// get container and original wrapper
const container = document.getElementById('container');
const original = document.querySelector('.input-form');
const cloneBtn = document.getElementById('clone-button');

function appendAClone() {
  // clone original and modify IDs
  let clone = cloneAndChangeIds(original, '-1');

  // add clone at end of container div
  container.appendChild(clone);
}

cloneBtn.onclick = appendAClone;

<button id="clone-button">Make A Clone</button>
<p>The original:</p>
<hr>
<div id="container">
  <div class="input-form fcf-form-group">

    <div class="form only">
      <h3 class="fcf-h3">Room</h3>
      <div class="form-section">

        <div class="title-group">
          <label for="room" class="fcf-label">Room</label>
          <select name="room" id="room" required>
            <option value="double">Double</option>
            <option value="single">Single</option>
          </select>
        </div>
      </div>
    </div>

    <div class="form neighbour">

      <div class="title-group small">
        <label for="adults" class="fcf-label">Adults</label>
        <input type="number" id="adults" name="adults" min="1" max="5">
      </div>

      <div class="title-group small">
        <label for="child" class="fcf-label">Children</label>
        <input type="number" id="child" name="child" min="1" max="5">
      </div>

      <div class="title-group small">
        <label for="age" class="fcf-label">Age of the Child</label>
        <select name="age" id="age" required>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </div>
    </div>
    <hr>
  </div>
</div>

这篇关于如何克隆表格并多次更改其子代的ID?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！