2012-03-17 5 views
0

메신저는 "newrow"클래스가있는 테이블에 삽입 된 행을 숨기려고합니다.jquery 클래스가 행을 숨 깁니다.

일반 행에는 이러한 새 행을 추가하는 추가 버튼이 있습니다. 버튼을 클릭 한 테이블 행 다음의 행이 삽입 된 "newrow"를 숨기려면 클릭 할 때 "숨기기"버튼을 클릭하십시오. ive는 그것을 해결하려고 노력했지만 해결 방법을 찾지 못했습니다.하지만 작동하지 않고 버그가 많으며 잘못 쓰여졌습니다. 어떤 아이디어?

Heres는 내 숨기기 방법

$(document).ready(function(){ 
    $(".hideRow").click(function(event){  

    var found; 
    found=false; 
    $('tr').each(function() { 

     if($(this).attr('class')=='newrow'){ 
      $(this).hide(); 
      found=true; 
     } 
     else if(found==true && $(this).attr('class')=='row'){ 
      return false; 
     } 
    }); 


    }); 
}); 
+0

이것이 의도 한 것인지 모르겠지만'return false'는'.each()'의 현재 반복에서 반환됩니다.이 경우 실제로 코드에서 아무 것도하지 않습니다. –

+0

아 나는 그것이 제대로 작동하지 못하는 이유를 잘 설명합니다. –

+0

또한 클릭 한 행부터 시작하지 않습니다. 작동했다면 테이블의 첫 번째 행 집합 만 숨길 수 있습니다. 당신이 클릭 한 곳을 얻으려면, 내 대답을 아래에서보십시오. –

답변

3

당신이 달성하려고하는 것이 확실하지만 작성한 내용에 기초하여 충분해야합니다.

$(".hideRow").click(function() { 
    $(this).parents("tr").nextUntil("tr:not(.newrow)").hide();   
}); 

테스트 됨 here.

+0

대단히 고마워요. –

+0

예, 정말 좋은 해결책입니다 :) – Nick

1

이 트릭을 할해야합니다.

$('.hideRow').click(function(){ 
    $('.newrow').hide(); 
} 

그렇지 않으면 더 많은 코드를 표시해야합니다. 코드를보다 쉽게 ​​공유하려면 http://jsfiddle.net 또는 유사한 사이트를 사용해보십시오. 행이 동적으로 여기

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


}); 

사용하여 시도를 생성하는 경우

+0

문제는 모든 새로운 행을 숨 깁니다. –

+0

처리중인 html 코드의 샘플을 표시 할 수 있습니까? 실시간으로 HTML을 렌더링했습니다. –

2

에 대한 링크입니다. attr('class') 클래스 속성을 가져올 때 모든 클래스의 문자열이 포함되어 있으므로 newrow row 등이 나타날 수 있습니다.이를 newrow과 비교하려고하면 일치하지 않습니다. 당신은 단지 다음 정상 row 클래스에 클릭 한 행의 행을 원하는 경우에

$(document).ready(function(){ 
    $(".hideRow").click(function(event){  
     $('tr .newrow').hide(); 
    }); 
}); 

, 당신은 사용할 수 있습니다 .nextUntil() :

newrow 요소는 클래스 row 있습니다
$(document).ready(function(){ 
    $(".hideRow").click(function(event){  
     $(this).parents('tr').nextUntil('.row').hide(); 
    }); 
}); 

경우, 당신이해야 할 것 이 :

$(document).ready(function(){ 
    $(".hideRow").click(function(event){  
     $(this).parents('tr').nextUntil(':not(.newrow)').hide(); 
    }); 
}); 

만약 내가 HTML의 구조를 알고 있다면, 이것은 아마도 최적화 될 수 있습니다. 알지 못하면 기본적으로 추측합니다. 또한

, 그냥 참고로, 당신의 return false 실제로하지 .click() 핸들러에서의 .each() 반복에서 반환합니다.

+0

도움을 주셔서 감사합니다 :) –

2

예, 지나치게 복잡해 보입니다. CSS가 display : none으로 설정된 클래스 히데로 우를 사용할 수 있습니다. 그런 다음이 클래스를 마음대로 추가하거나 제거 할 수 있습니다. 아니면 당신이 사용할 수 있습니다 hide();

내가 이해하는 것처럼, 사용자가 행을 추가 "를 클릭 한 다음 행 B 조, C를 만듭니다 ... 사용자는 다음 행"B를 숨기기 위해 행 "숨기기"를 클릭 할 수 있습니다 , C ...

행 A에 고유 ID (예 : R32)를 부여한 다음 생성 된 하위 클래스 (C32 - 하위 32 자)를 제공하는 것이 좋습니다.

$('.C32').hide(); 

를하거나 표시 없음으로 클래스 숨기기 행을 만든 경우 : 다음 숨기기 버튼 R32를 클릭 할 때 당신은 해고

$('.C32').addClass('hiderow'); 

당신은 show(); 이상에서 위의 역을 모두 할 수 있습니다 removeClass('hide row');toggle();

이 모든 것은 숨기려는 자식이있는 테이블 행이 둘 이상있을 수 있다고 가정합니다. 그렇지 않은 경우 해당 행의 하위 행에 대한 고유 한 행 ID 및 클래스를 사용하는 것은 아마도 필요하지 않습니다.

관련 문제