jQuery : 테이블에 행이 남아 있지 않은 경우 검색

Question

테이블에 남아있는 행이 있는지 검색하려고합니다. 아무 것도 없으면 검색 결과를 표시합니다. 다음 코드는 효과가없는 것 같습니다. 어떤 아이디어입니까? 내가 경고하기 전에 제거와 노력, 그리고 내가 행을 제거 할 때마다 트리거 :

$('.remove_row').live('click', function() { 

    //If there are no rows left in table, display alert 
    if ($(this).parent().parent().parent().children('tr:eq(1)').length == 0) { 

     alert("no rows left"); 

    } 

    $(this).parent().parent().remove(); 

}); 

EDIT (이 나는 인덱스 1을 사용하는 이유는 테이블 머리글 왼쪽 한 행이 될 것입니다).

---

또 다시 수정 : 마지막 하나는 실제로 DOM에서 제거되기 전에 확인되어 있기 때문에, 인덱스 2를 만드는 데 필요한, 알았어요.

Answer 1

if ($(this).closest("tbody").find("tr").length === 0) { 
    alert("no rows left"); 
} 

이것은 cloest 부모 클릭 된 요소의 tbody을 (A tbody 항상 DOM에 존재) 찾습니다. 상기 tbody 내의 tr 요소의 길이를 검사합니다. 0과 같으면 경고를 표시합니다.

Answer 2

대신 .live()를 사용하는 (당신이 jQuery를보다 오래된 1.7을 사용하는 경우 또는 .delegate()), .on()를 사용 http://jsfiddle.net/UbUbM/

.delegate()과 같을 것이다 이벤트 바인딩을 사용 : 여기

//bind to the `click` event for all `.remove_row` elements that are in the DOM or will be in the future that have the ancestor `#table-id` element 
$('#table-id').on('click', '.remove_row', function() { 

    var $TRs = $(this).parents('table:first').find('tr'); 

    //find the number of rows in the table in which the clicked `.remove_row` element is located 
    if ($TRs.length < 2) { 

     alert("no rows left"); 

    } else { 

     $TRs.eq(0).fadeOut(500, function() { 

      $(this).remove(); 

     }); 

    } 

}); 

는 데모입니다 이 :

$('#table-id').delegate('.remove_row', 'click', function() { 

이렇게하면 표가 루트 요소로 사용됩니다. document 요소보다 또한이 코드가 실행될 때 테이블에 DOM이 있다고 가정합니다.

나중에에 대한 몇 가지 문서 :

• .on() : http://api.jquery.com/on
• .delegate() : http://api.jquery.com/delegate
• .live() : http://api.jquery.com/live는