현재 가리키고있는 요소의 비 호버 css backgroundColor 소도 가져 오기

Question

클릭 한 행 뒤에 새 행을 삽입하여 클릭 할 때 "확장"되는 행의 표가 있고 CSS를 사용하고 있습니다. 얼룩말 (zebra-style)은 행에 셀을 넣을뿐만 아니라 행을 가리키면 셀에 '강조 표시'스타일을 적용합니다.

내가 삽입 한 행에 클릭 한 행의 배경색이 같게하고 싶습니다.

클릭 한 행의 첫 번째 셀의 backgroundColor 속성을 사용하여 삽입 된 행의 셀 배경색을 jQuery로 설정하려고합니다.

그러나 이렇게하면 클릭 한 행 위로 마우스를 가져 갔기 때문에 '강조 표시'색상이 표시됩니다. 비 호버 값을 원합니다.

CSS :

.zebra-striped tbody tr:nth-child(odd) td { 
    background-color: #f9f9f9; 
} 
.zebra-striped tbody tr:hover td { 
    background-color: #f5f5f5; 
} 

jQuery를 :

table.find('tbody').find('tr').on('click',function() { 
    var colourOfRow = $(this).find("td").filter(":first").css('backgroundColor'); 
    var newRows = $('<tr><td style="background-color:'+colourOfRow+';" colspan="'+numCols+'" rowspan="2">Fetching comment...</td></tr><tr></tr>'); 
    newRows.insertAfter($(this)); 
}); 

나는 내가 그것을 사용할 필요가 전에 색상을 저장하여이 문제를 해결할 수 있습니다 확신 해요,하지만 내 질문은 :

내가 놓친 jQuery 선택 자나 다른 잘 알려진 트릭이 있습니까?

Answer 1

아니요, 그렇게 할 수 없습니다. 하지마.

색상/스타일을 업데이트하는 더 좋은 방법은 클래스를 추가/제거하는 것입니다. CSS에서 스타일을 정의한 다음 클래스를 추가/제거하여 화면을 확인하십시오.

jQuery에서 정보를 비교하여 상태를 전환하려는 시도가 이상합니다!

Answer 2

+2 또는 -2 행의 동일한 셀 배경색을 선택하지 않는 이유는 무엇입니까? 행이 하나 뿐인 경우 행을 더 추가하여 색상을 가져 와서 신속하게 삭제할 수 있습니다. 가장 좋은 방법은 홀수 및 짝수 요소의 색을 저장하고 나중에 필요할 때 사용하는 것입니다. 하지만 다시 (이 경우는 확실하지 않습니다.) 이미 추가 된 행을 클릭 한 후 행을 추가 할 수 있다면 또 다른 문제가 발생합니다.

Answer 3

다음은 현재 해결 방법입니다. (그리고 @Mathletics 덕분에 자신의 답변을 @szym) :

tableRows.each(function(index){ 
    $(this).data('oc', $(this).find("td").filter(":first").css('backgroundColor')); 
}); 

하고 그 행 맥락에서 색상이 필요할 때 : 아마

var colourOfRow = $(this).data('oc'); 

없는 가장 성능이 좋은 솔루션,하지만 충분를 나는 생각한다.

다른 사람들이 훌륭한 아이디어를 가지고있는 경우를 대비해서이 질문을 공개하겠습니다.