JQuery 테이블 셀과 행 배경색 변경 (호버시)

Question

기본적으로 테이블의 행 위로 마우스를 가져 가면 행의 배경색이 '검은 색'으로 변경되고 특정 셀 또는 TD가 변경되도록 변경합니다. '붉은 색'.

이렇게하면 호버링 할 때 두 가지 이벤트가 발생합니다. 나는 둘 중 하나를 위해 그것을하는 방법을 압니다.

jquery를 사용하면 가능합니까?

Thx는 모든 분들께 기부를 전하고 있습니다.

Answer 1

간단한 CSS는 충분하다 :

tr:hover{ 
background-color:red 
} 

td:hover{ 
background-color:blue 
} 

http://jsfiddle.net/nRuXn/1/

Answer 2

행과 셀이 모두 동일한 컨테이너에있는 경우 해당 컨테이너에 mouseover 이벤트를 첨부하고 핸들러에서 자식을 수정할 수 있습니다.

<table> 
<tr class='rdClass'> 
<td> 
     1 
</td> 
<td class='blkClass'> 
     2 
</td> 
<td> 
     3 
</td> 
</tr> 
</table> 

$(document).ready(function() 
{ 
    $(".rdClass").mouseover(function() 
    { 
     $(this).css("background-color", "red"); 
    }); 

    $(".blkClass").mouseover(function() 
    { 
     $(this).css("background-color", "black"); 
    }); 
}); 

Answer 3

당신이 빨간색으로 원하는 TD 몇 가지 클래스를 추가하고 행 'blkClass'(클래스 'rdClass'를 호출 할 수 있습니다) 클래스를 제거한 다음 CSS를 사용하여 행과 셀에 대해 클래스의 스타일을 다르게 지정하십시오.

Working Demo

jQuery를

$('tr, td').hover(function() { 
    $(this).addClass('highlight'); 
}, function() { 
    $(this).removeClass('highlight'); 
}); 

CSS

tr.highlight { 
    background-color: red; 
} 

td.highlight { 
    background-color: black; 
} 

Answer 4

가 추가 모든 행과 TD의에 호버 리스너를 추가

Answer 5

$("td").hover(function(){ 
    $(this).css("background-color", "red"); 
    $(this).parrent('tr').css("background-color", "black"); 
}); 

Answer 6

$('td').hover(function() { 
    $(this).parent().children().css("background-color", "black"); 
    $(this).css("background-color", "red") 
}); 

$('tr').mouseleave(function() { 
    $(this).children('td').css("background-color", "white");// or whatever 
});