테이블 행 목록을 통해 중간에 tr 요소를 추가하는 가장 좋은 방법은 jQuery

Question

입니다.

$('<tr class="item" />').insertAfter('#content tr:first'); 

: 나는 다음과 같은 코드를 사용하여 jQuery를 사용하여 요소를 추가하고

<table id="content"> 
<tr class="item"> 
<td><p>header content</p></td> 
</tr> 
<tr class="item"> 
<td><p>footer content</p></td> 
</tr> 
</table> 

: 아래와 같은 간단한 테이블을 통해

내가 TR 요소 삽입 도움을 찾고 있어요 중반을-방법

그러나이 명령을 사용하여 요소를 추가 한 후에는 목록의 맨 위에는 추가하지 말고 추가 한 항목을 추가하고 싶습니다.

확실한 방법이 있습니다. footer 엘리먼트에 id를 할당하고 .insertBefore ('# footer')를 사용하면됩니다.하지만 사용 가능한 여러 가지 기술을 아는 것은 흥미로울 것입니다. 미리 감사드립니다! :)

Answer 1

, 당신의 생각은 ID가 보일 것입니다 추가 말이 되네.

ID를 사용하지 않으려면 :first 선택기와 유사한 아이디어를 사용하십시오. 가능성의 관점에서 insertBefore('#content tr:last');

$('<tr class="item" />').insertBefore('#content tr:last'); 

Answer 2

:eq 선택은 경우에 편리해야한다 : 행이 항상 바닥 글 행하기 전에 요소에 할당 할 경우

는

// insert after first row 
$('<tr class="item" />').insertAfter('#content tr:eq(0)'); 
// insert after second row 
$('<tr class="item" />').insertAfter('#content tr:eq(1)'); 
// insert after third row 
$('<tr class="item" />').insertAfter('#content tr:eq(2)'); 
// and so on 

Answer 3

를 수행, 당신은이 작업을 수행 할 수 있지만 최상의 방법은 먼저 HTML의 모든 사항을 빌드하는 것이 더 나은 것 보여 것이며, 다음을 주입.

그래서,이 같은 일이 될 것

$('#content tr:first').after(function(){ 
    var html = ""; 
    for(var i = 0; i < NUM_OF_ROWS; i++) { 
    html += '<tr class="item" />'; 
    } 
    return html; 
}); 

거기 DOM에 대한 하나의 접근이며 모두 예쁘고까지 하나의 함수에서의 그런 식으로 최고. 이 작동 할