javascript - 如何复制表格的特定部分？

Question

我有一些代码如下例:

<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，所以如果您也能在您的回答中添加一个清晰的解释，我们将不胜感激。

Answer 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 />