克隆行而不是克隆tr

Question

我正在尝试克隆表row。但是我只能在没有tr标签的情况下克隆里面的东西。请查查我的剧本

​

$(".tr_clone_add").on('click', function() {
  $('.tr_clone').last().clone({
    withDataAndEvents: true
  }).insertBefore('.tr_clone_add:first');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped table-bordered" cellspacing="0" width="100%">

  <thead>
    <tr>
      <td>Hari</td>
    </tr>
  </thead>


  <tbody>
    <tr class="tr_clone">
      <td>
        <select id="dropdown" class="form-control" name="hari[]">
          <option>Senin</option>
          <option>Selasa</option>
          <option>Rabu</option>
          <option>Kamis</option>
          <option>Jumat</option>
        </select>

      </td>
    </tr>
  </tbody>
</table>

<input type="button" name="add" value="Tambah Baris" class="tr_clone_add">

​

我怎么才能修好它？对不起我的英语不好。

Answer 1

首先，请注意，clone()接受一个布尔值作为第一个参数，而不是对象。

其次，您的问题在于您在按钮之前附加了tr元素，而不是在表中。相反，尝试像这样使用appendTo('table tbody')：

​

$(".tr_clone_add").on('click', function() {
  $('.tr_clone').last().clone(true).appendTo('table tbody');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
    <tr>
      <td>Hari</td>
    </tr>
  </thead>
  <tbody>
    <tr class="tr_clone">
      <td>
        <select id="dropdown" class="form-control" name="hari[]">
          <option>Senin</option>
          <option>Selasa</option>
          <option>Rabu</option>
          <option>Kamis</option>
          <option>Jumat</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

<input type="button" name="add" value="Tambah Baris" class="tr_clone_add">

​