jQuery表のクローンをクローン

Question

最後に「追加」ボタンがあるテーブルがあります。このボタンをクリックすると、現在のテーブル行の下に新しいテーブル行が作成されます。また、この行の入力フィールドを空白にします。私は.clone（）を使ってこれをしようとしていますが、ページ上のすべての行をクローンします。助けてください。おかげ

スクリプト

$("input.tr_clone_add") 
     .live('click', function(){ 
       $(this).closest('.tr_clone') 
        .clone() 
        .insertAfter(".tr_clone") 
     }); 

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data"> 
<tr> 
<td>Name</td> 
<td>Location</td> 
<td>From</td> 
<td>To</td> 
<td>Add</td> 
</tr> 
<tr class="tr_clone"> 
<td><input type="text" autofocus placeholder="who" name="who" ></td> 
<td><input type="text" autofocus placeholder="location" name="location" ></td> 
<td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td> 
<td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td> 
<td><input type="button" name="add" value="Add" class="tr_clone_add"></td> 
</tr> 
</table><!-- /table#table-data --> 

Answer 1

あなたの問題は、あなたのinsertAfter：すべての.tr_clone後

.insertAfter(".tr_clone") 

挿入：

このパラメータで指定された要素の後に一致する要素のセットが挿入されます。

複写している行でafterを使用してください。そして少し.find(':text').val('')はクローンテキスト入力をクリアします。このような何か：

var $tr = $(this).closest('.tr_clone'); 
var $clone = $tr.clone(); 
$clone.find(':text').val(''); 
$tr.after($clone); 

デモ：http://jsfiddle.net/ambiguous/LAECx/

は、私はその一人で残してきたように、入力がフォーカスで終わるべきかわかりません。

Answer 2

ここに行く：

$(table).delegate('.tr_clone_add', 'click', function() { 
    var thisRow = $(this).closest('tr')[0]; 
    $(thisRow).clone().insertAfter(thisRow).find('input:text').val(''); 
}); 

ライブデモ：http://jsfiddle.net/RhjxK/4/

---

更新：のjQueryのイベントを委任するための新しい方法が

$(table).on('click', '.tr_clone_add', function() { … }); 

Answer 3

これを試してみてくださいですv ariation：

$(".tr_clone_add").live('click', CloneRow); 

function CloneRow() 
{ 
    $(this).closest('.tr_clone').clone().insertAfter(".tr_clone:last"); 
} 

Answer 4

以下のコードは、最後の行のクローンを作成し、表の最後の行の後に追加されます：

var $tableBody = $('#tbl').find("tbody"), 
$trLast = $tableBody.find("tr:last"), 
$trNew = $trLast.clone(); 

$trLast.after($trNew); 

の作業例：http://jsfiddle.net/kQpfE/2/

Answer 5

はこれを試してみてください。

HTML

<!-- Your table --> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Location</th> 
      <th>From</th> 
      <th>To</th> 
      <th>Add</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="text" autofocus placeholder="who" name="who" ></td> 
      <td><input type="text" autofocus placeholder="location" name="location" ></td> 
      <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td> 
      <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td> 
      <td><input type="button" name="add" value="Add" class="tr_clone_add"></td> 
     </tr> 
    <tbody> 
</table> 

<!-- Model of new row --> 
<table id="new-row-model" style="display: none"> 
    <tbody> 
     <tr> 
      <td><input type="text" autofocus placeholder="who" name="who" ></td> 
      <td><input type="text" autofocus placeholder="location" name="location" ></td> 
      <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td> 
      <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td> 
      <td><input type="button" name="add" value="Add" class="tr_clone_add"></td> 
     </tr> 
    <tbody> 
</table> 

スクリプト

$("input.tr_clone_add").live('click', function(){ 
    var new_row = $("#new-row-model tbody").clone(); 
    $("#table-data tbody").append(new_row.html()); 
}); 

Answer 6

このコードを試してみては、 は私がクローニングおよびクローン化された要素を除去するため、次のコードを使用し、私はまた、新しいクラスを使用しています（newClass）これはtで自動的に追加できます彼は、新たにHTMLクローン要素を除去するため

クローニングのための...

$(".tr_clone_add").live('click', function() { 
    var $tr = $(this).closest('.tr_clone'); 
    var newClass='newClass'; 
    var $clone = $tr.clone().addClass(newClass); 
    $clone.find(':text').val(''); 
    $tr.after($clone); 
}); 

をクローン化しました。

$(".tr_clone_remove").live('click', function() { //Once remove button is clicked 
    $(".newClass:last").remove(); //Remove field html 
    x--; //Decrement field counter 
}); 

HTMLは、私はあなたにも、 `name`のパラメータが（データの競合を避けるために、更新したいと思います

<tr class="tr_clone"> 
         <!-- <td>1</td>--> 
         <td><input type="text" class="span12"></td> 
         <td><input type="text" class="span12"></td> 
         <td><input type="text" class="span12"></td> 
         <td><input type="text" class="span12"></td> 
         <td><input type="text" class="span10" readonly> 
         <span><a href="javascript:void(0);" class="tr_clone_add" title="Add field"><span><i class="icon-plus-sign"></i></span></a> <a href="javascript:void(0);" class="tr_clone_remove" title="Remove field"><span style="color: #D63939;"><i class="icon-remove-sign"></i></span></a> </span> </td> </tr>