如何复制表格的特定部分？答案

【问题标题】：How to duplicate specific sections of form?如何复制表格的特定部分？
【发布时间】：2018-10-15 05:00:34
【问题描述】：

我有一些代码如下示例：

<form>
  <label>name</label><input type="text" />
  <label>phone</label><input type="text" />

  <label>color</label><select>
    <option>red</option>
    <option>blue</option>
    <option>green</option>
  </select>

  <label>e-mail</label><input type="text" />
</form>

如果用户需要通过select 部分和电子邮件输入字段之间的按钮，我只想复制select 部分。

我不是很喜欢 JavaScript 或 jQuery，所以如果你能在你的答案中添加一个清晰的解释，我将不胜感激。

【问题讨论】：

重复问题？ stackoverflow.com/questions/34934435/…
选择部分和电子邮件输入字段之间的通过按钮是什么意思？您想在它们之间添加一个按钮以在单击时复制选择元素？
跟随@Jules 给出的链接并尝试实施。如果您在执行此操作时遇到任何错误，请告诉我们。会帮助你。 clone() 是您应该使用的 jQuery 函数。
@BuggyParadox 是的。

标签： javascript jquery html

【解决方案1】：

您可以使用 JQuery clone 函数来克隆您的元素，然后将其附加到您需要的位置，或者如果您需要为每个需要的部分设置不同的 id，您可能需要保存一个索引并将其设置为每次添加部分时的id

var index = 1;
function addColor() {
  var nextSection = '<div id="color-section-' + index++ + '">' +
    '<label>color</label>' +
    '<select>' +
      '<option>red</option>' +
      '<option>blue</option>' +
      '<option>green</option>' +
    '</select><br />' +
  '</div>';
  $(nextSection).appendTo($("#color-section"));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
  <label>name</label><input type="text" /><br />
  <label>phone</label><input type="text" /><br />

  <div id="color-section">
    <label>color</label>
    <select>
      <option>red</option>
      <option>blue</option>
      <option>green</option>
    </select><br />
  </div>

  <label>e-mail</label><input type="text" /><br />
</form>

  <button onClick="addColor()">Add Color</button><br />

【讨论】：

【解决方案2】：

您可以使用clone() 复制元素。请参阅下面的示例并进行解释。

名为“color-selections”的 div 元素包含一个初始选择标记。

<div class="color-selections"> <select> <option>red</option> <option>blue</option> <option>green</option> </select> </div>
“颜色选择”类中的选择标签数量未知。所以我使用 first() 方法来获取第一个元素（原始选择标签）。

$(".color-selections select:first")
使用 clone() 复制第一个元素。

$(".color-selections select:first").clone()
最后，使用 appendTo() 方法将此克隆元素附加到“颜色选择”类中。

$(".color-selections select").first().clone().appendTo(".color-selections");

function addColor() {
  $(".color-selections select:first").clone().appendTo(".color-selections")
  //OR $(".color-selections select").first().clone().appendTo(".color-selections");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>name</label><input type="text" />
  <label>phone</label><input type="text" />

  <label>color</label>
  <div class="color-selections">
    <select> //$(".color-selections select:first")
      <option>red</option>
      <option>blue</option>
      <option>green</option>
    </select>
  </div>
  <input type="button" value="+" onclick="addColor();">

  <label>e-mail</label><input type="text" />
</form>

我希望设计不是示例代码的重要组成部分。

【讨论】：