jQuery를 사용하여 여러 테이블 행 복제하기

Question

필드 테이블과 사용자가 복제 할 수있는 일부 필드가 들어있는 양식을 갖고 싶습니다. 몇 가지 헤더 필드 (예 : 송장 일자, 고객 이름 등)가있는 인보이스를 상상해보십시오. 여러 개의 상세 필드 (예 : 제품, 수량, 가격)가있을 수 있으며 마지막으로 몇 개의 바닥 글 필드가있을 수 있습니다 (예 : 세금 , Total 등). 처음에는 하나의 세부 선으로 양식을 표시하고 사용자가 더 자세한 선을 추가하기 위해 단추를 클릭하게하고 jQuery를 사용하여이 작업을 수행하려고합니다.

하나의 테이블 행을 복제하는 방법을 보여주는 여러 예제가 있지만 더 유연한 것을 만들고 싶습니다. 몇 개의 테이블 행을 지정하고 버튼을 클릭하면 해당 행을 복제 할 수 있어야합니다.

은 지금까지 나는 다음과 같은 코드를 가지고 :

이 HTML이 예를 들어 단락되어 있지만 내가 TBODY에서 그들을 넣어 복제 할 수있는 테이블 행을 지정하는 것을 볼 수

<form action="" method="post"> 
    <table border="0" align="center" cellpadding="2" cellspacing="1" id="invoice"> 
    <tr> 
     <td>Name:</td> 
     <td><input name="name" type="text" id="name" size="50" maxlength="100"></td> 
    </tr> 
    <tbody class="multi"> 
     <tr> 
     <td>Product:</td> 
     <td><input name="product[]" type="text" size="50" maxlength="50"></td> 
     </tr> 
     <tr> 
     <td>Qty:</td> 
     <td><input name="qty[]" type="text" size="5" maxlength="5"></td> 
     </tr> 
     <tr> 
     <td>Price:</td> 
     <td><input name="price[]" type="text" size="10" maxlength="10"></td> 
     </tr> 
    </tbody> 
    <tr> 
     <td>Tax:</td> 
     <td><input name="tax" type="text" id="tax" size="10" maxlength="10"></td> 
    </tr> 
     <td>&nbsp;</td> 
     <td><input type="button" id="addline" value="Add Another Line"> 
     <input name="Submit" type="submit" value="Submit Invoice"></td> 
    </tr> 
    </table> 
</form> 

"멀티"클래스. 나는 PHP를 사용하여 제출 된 양식을 처리 할 것이므로 복제 할 필드의 끝에있는 []를 사용합니다 (PHP 배열 처리 기능 사용). 중복 될 행의 위와 아래에 테이블 행이 여러 개있을 수 있지만 간결성을 위해 하나만 표시했습니다. 이것은 내가 중복 할 행의 전체 블록을 선택하고 다음을 복제하고 중복 된 블록 바로 뒤에 삽입하기위한 것입니다

$(document).ready(function($) { 
    $('#addline').click(function() { 
    $('#invoice > tbody.multi').clone().insertAfter('#invoice > tbody.multi'); 
    }); 
}); 

:

나는 다음과 같습니다 일부 자바 스크립트가 있습니다.

이 방법이 효과가 있지만 문제는 내가 추가 버튼을 클릭하면 두 개의 tbody 블록으로 끝나고 둘 다 "다중"클래스로 끝납니다. 두 번째로 Add Line 버튼을 클릭하면 두 개의 tbody 블록이 복제되어 4 개의 tbody로 끝납니다!

이 문제를 해결하는 가장 좋은 방법은 무엇입니까? 새로 복제 된 tbody의 클래스를 변경하여 미래의 중복에 포함시키지 않도록 시도해야합니까? 아니면 이것을 완전히 처리 할 수있는 더 좋은 방법이 있습니까?

많은 예제에서 보았 듯이 한 행만이 아니라 여러 테이블 행을 동시에 복제 할 수 있기를 바랍니다. 또한 일부 예제에서 jQuery 코드 내에서 복제 될 테이블 및 양식 HTML이 모두 포함되어 있다는 것을 알았습니다. jQuery 코드는 나에게 일을하는 깔끔한 방법처럼 보입니다. 마지막으로 중복 된 필드의 값을 지우고 중복 된 블록을 삭제할 수 있습니다.

Answer 1

당신은 (미세하고 잘 조직 된 HTML 유지하는), 그럼 그냥 복제 할 때 마지막 tbody.multi을 선택 :last에 혼합하고 다시 끝에 복제 추가하기 위해 여러 <tbody>의를 원하는 경우 :

$('#addline').click(function() { 
    $('#invoice > tbody.multi:last').clone().insertAfter('#invoice > tbody.multi:last'); 
});​ 

을

그런 다음 당신은 간단한 val 호출로 복제 된 입력을 취소 할 수 있습니다

$('#addline').click(function() { 
    var clone = $('#invoice > tbody.multi:last').clone(); 
    clone.find('input').val(''); 
    clone.insertAfter('#invoice > tbody.multi:last'); 
}); 

데모 : http://jsfiddle.net/aeYED/1/