jQuery : 테이블에 행 추가 및 DOM에서 선택하기

Question

테이블에 행을 추가 한 다음 DOM 객체로 사용하고 싶습니다.

<table> 
    <tr class="existing-row"><td> 
     <a>add new row</a> 
    </td></tr> 
    <tr class="existing-row"><td> 
     <a>add new row</a> 
    </td></tr> 
</table> 

내가 행을 삽입 jQuery를 다음과 같은 자바 스크립트를 사용 : 다음과 같은 HTML을 가정

function addNewRow(addNewRowLink) 
    { 
    var currentRow = addNewRowLink.closest('tr'); 
    currentRow.after('<tr class="added-row"><td>This is new</td></tr>'); 

    var newRowInDomTree = currentRow.next('tr'); 
    //This does not work 
    } 

변수 newRowInDomTree 대신 tr.existing-rowtr.added-row이 포함되어 있습니다. DOM 트리가 업데이트되지 않은 것 같지만 그 이유는 무엇입니까.

아이디어가 있으십니까?

고맙습니다.

Answer 1

코드가 작동하는 것을 볼 수 없다는 점을 제외하고 코드가 작동해야하므로 addNewRowLink이 실제로 무엇인지 알 수 없습니다.

대신 새 요소를 만들 때 참조를 유지하는 것이 좋습니다. 이처럼 :

function addNewRow(addNewRowLink) { 
    var currentRow = addNewRowLink.closest('tr'); 
    var newRowInDomTree = $('<tr class="added-row"><td>This is new</td></tr>') 
           .insertAfter(currentRow); 
    // newRowInDomTree will be the element you created 
} 

Answer 2

생각 당신이 올바른 기능을 사용하여 간단하게 할 수 찾고있는 효과 :

을 대신 :

currentRow.after('<tr class="added-row"><td>This is new</td></tr>'); 

당신이 시도해야합니다

newRowInDomTree = $('<tr class="added-row"><td>This is new</td></tr>').insertAfter(currentRow); 

요소가 나오기 전에 선택 사항 (currentRow.next('tr'))이 발생했다고 추측 할 수 있습니다. 실제로 DOM에 추가되었습니다. onload 또는 onreadystatechange 이벤트를 듣고 나중에 해고되는지 확인할 수 있습니다.

Answer 3

어때요?

$(".existing-row a").click(function() { 
newRow = $(this).parent.after('<tr class="added-row"><td>This is new</td><tr>'); 
}); 

Answer 4

테이블에 ID를 지정하십시오. 즉,