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와 함께 자동으로 추가 될 수 있습니다. 그는 새로 복제 요소를 제거하기 위해 ..

$(".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); 
}); 

HTML 복제에 대한

복제.

$(".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>