2011-04-14 3 views
3

? 그럼 2 가지 질문이 있습니다.하이라이트 테이블 행

  1. 위에서 언급 한 테이블 구조에 어떻게 강조 표시를 적용 할 수 있습니까?
  2. 강조 표시 효과가 행 위로 움직이면 이동 표시를 되돌릴 수 있습니까?

jQuery 1.4 이상을 사용하고 있으므로 jQuery 코드를 사용하여 다음을 달성 할 수있는 방법을 제안 해주십시오. http://jsfiddle.net/c9h5w/

감사 :

나는 같은에 대한 jsfiddle을 만들 수 있습니다.

답변

5

나는 현재 끌고있는 행에 클래스 이름을 추가하려고합니다. 그런 다음 CSS를 사용하여이 행의 모든 ​​표 셀을 특정 배경색으로 스타일을 지정할 수 있습니다. 스타일을 제거하는 것은 단순히 mouseout 이벤트를 트리거하고 클래스 이름을 제거하는 문제입니다.

CSS :

.hovered td { 
    background: #ddd; 
} 

자바 스크립트 :

$('table tr').mouseover(function() { 
    $(this).addClass('hovered'); 
}).mouseout(function() { 
    $(this).removeClass('hovered'); 
}); 

Live example.

1

체크는 아웃 :

$("table tr").hover(
      function(){ 
       $(this).css("background-color","#FFEFC6"); 
       //$(this).addClass('className'); //if ur working with class 
      }, 
      function(){ 
       $(this).css("background-color",""); 
       //$(this).removeClass('className'); //if ur working with class 
      } 
     ); 

CLICK HERE TO SEE THE DEMO