jQuery를 사용하여 테이블 행을 복제 한 후 ID를 동적으로 업데이트하는 방법은 무엇입니까?

Question

트리거되면 테이블의 세 번째 (아래쪽) 행이 복제됩니다. CSS에서이 행 (# tr3)은 다음과 같이 설정됩니다. display : none; 다음은 복제 할 테이블 행입니다.

<tr name="tr3" id="tr3"> 
    <td><input type="text" name="dt1" id="dt1"></td> 
    <td><input type="text" name="fn1" id="fn1"></td> 
    <td><a href="#" name="change1" id="change1">change</a></td> 
    <td><a href="#" name="del1" id="del1">delete</a></td> 
</tr> 

행을 복제하는 JQuery 코드입니다. 내 것이 아니라, 슬프게도, 나는 그것을 모두 이해하지 못한다.

$("table tr:nth-child(4)").clone().find("input").each(function() { 
    $(this).val('').attr('id', function(_, id) { 
    return id + count; 
}); 

특히 2 행의 기능이 어떻게 작동합니까? 밑줄은 무엇입니까?

여기 나와 있습니다. 어떻게 I :

1. 변화 디스플레이 스타일 : 복제 된 행에 대한 블록 및
2. 갱신 복제 된 행의 앵커 태그의 식별자. 입력 필드의 ID가 업데이트됩니까 (예 : fn1 => fn11, fn12, fn13, fn14 등).

감사합니다.

Answer 1

:

var $clone = $("table tr:nth-child(4)").clone(); 

1. 어떻게 복제 된 행에 대해 display:block의 스타일을 변경하려면?

   $clone.show(); 
   

2. 복제 된 행에서 앵커 태그의 ID를 업데이트하는 방법. 위의 jQuery 코드에서

   $clone.find("a, input").each(function() { 
       $(this).val('').attr('id', function(_, id) { 
       return id + count; 
       }); 
   }); 
   

3. 어떻게합니까 라인 2 일에서 함수 - 밑줄은 무엇인가?

   밑줄 (_)는 유효 ECMAScript's identifier name이며 두 번째 인수 잡을 수 있도록 자리 표시로 간단하게 사용된다 (id를.)

그리고 모든 것을 전부 (검증되지 않은.)

$("table tr:nth-child(4)") 
    .clone() 
    .show() 
    .find("a, input").each(function() { 
    $(this).val('').attr('id', function(_, id) { 
     return id + count; 
    }); 
    }); 

Answer 2

1. 복제 된 행에 실제로 액세스하지 마십시오. 그것을 무언가에 할당해야합니다.

   $clonedRow = $("table ...").clone(); 
   

   다음 아마도 다른 모든 방법을 실행하고 마지막으로 당신은 어떻게 든 마지막 숫자를 벗겨 필요

   $clonedRow.insertAfter("table ...") 
   

2. 과 가능성의 DOM에 $clonedRow를 추가 할 수 있습니다 정규식과 :

   return id.replace(/\d+$/, '') + count; 
   

3. _은 자리 표시 자입니다. 사용되지 않기 때문에 코드 작성자는 선언문에서 id 매개 변수를 가져와야하기 때문에 변수 이름을 선택하지 않았습니다. 그냥 선명도