javascript - 第一次克隆后 jQuery 克隆表行

Question

我有一个dynamic form巨大select lists而不是在我的数据库中查询每个 select option 。我只想clone我的门外一排PHP foreach 循环具有完整的选项集。

现在我正在做这样的事情:

<table id="test" class="table">
<tr>
    <td>
        <select class="form-control" name="type[]">
            <option value="20">Auto Rental</option>
        </select>
    </td>
    <td>
        <select class="form-control" name="distance_type[]">
            <option value="1">Nearby</option>
        </select>
    </td>
</tr>
<tr class="clone">
    <td>
        <select class="readonly form-control" name="type[]" disabled>
            <option value="20">Boat Rental 1</option>
            <option value="20">Boat Rental 2</option>
            <option value="20">Boat Rental3</option>
        </select>
    </td>
    <td>
        <select class="readonly form-control" name="distance_type[]" disabled>
            <option value="1">Nearby</option>
            <option value="1">Far</option>
            <option value="1">10 miles</option>
        </select>
       </td>
    </tr>
</table>

<a class="add" href="#">Add New Row</a>

Javascript

         $(".add ").on('click', function () {
         var clone = $('.clone').closest('tr')[0];
         $(clone).clone().insertAfter(clone);
         $('.readonly').attr("disabled", false)
         });

我禁用了选择输入，因此除非单击“添加”按钮，否则它不会被提交。问题是当我单击添加按钮时，它最终会启用它并添加另一个字段。我几乎只想隐藏第一个实例，当单击它时它会启用它，然后当我再次单击添加时它会添加新字段等。

这里是实时版本 https://jsfiddle.net/f4gp9uky/

尝试了一些类似 $('#el'):nth-child(n+3).hide(); 的东西但这是行不通的。

如有任何建议，我们将不胜感激。

Answer 1

你可以做类似的事情

var $clone = $('.clone');
$(".add ").on('click', function() {
  if ($clone.hasClass('hidden')) {
    $clone.removeClass('hidden').find('.readonly').prop("disabled", false)
  } else {
    $clone.clone().appendTo($clone.parent());
  }
});

.hidden {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="test" class="table">
  <tr>
    <td>
      <select class="form-control" name="type[]">
        <option value="20">Auto Rental</option>
      </select>
    </td>
    <td>
      <select class="form-control" name="distance_type[]">
        <option value="1">Nearby</option>
      </select>
    </td>
  </tr>
  <tr class="clone hidden">
    <td>
      <select class="readonly form-control" name="type[]" disabled>
        <option value="20">Boat Rental 1</option>
        <option value="20">Boat Rental 2</option>
        <option value="20">Boat Rental3</option>
      </select>
    </td>
    <td>
      <select class="readonly form-control" name="distance_type[]" disabled>
        <option value="1">Nearby</option>
        <option value="1">Far</option>
        <option value="1">10 miles</option>
      </select>
    </td>
  </tr>
</table>
<a class="add" href="#">Add New Row</a>