克隆行不克隆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">