테이블 행의 jQuery 강조 표시

col1, col2, col3, col4라는 4 개의 coloumn 테이블이 있습니다. 기둥이 다른 색상을 가지고 있습니다. col1에 도구 설명 링크가 있습니다. 커서가 링크를 가리키면 도구 팁이 표시되고 해당 행의 배경 이미지도 변경됩니다. 전체 테이블에는 하나의 배경 이미지가 있습니다.테이블 행의 jQuery 강조 표시

다음 코드로 시도했지만 Chrome 및 Safari에서는 4 열 (첫 번째 색의 색)에 대해 동일한 색을 표시합니다.

$(function() { 
$('td:first-child a').hover(function() { 
    $(this).closest('table.benefitstable tbody tr').toggleClass("highlight"); 
}); 
}); 

.benefitstable tbody tr.highlight { 
background:url(../images/tablerowhover.jpg) 0 0 no-repeat; 
}

그것은 다음의 태그와 jQuery를없이 할 거의 동일합니다 :

.benefitstable tbody tr:hover { 
background:url(../images/tablerowhover.jpg) 0 0 no-repeat; 
}

어떤 도움?

출처

2011-12-30 Paramasivan

지저귐 부트 스트랩 지브라 테이블이 구현, 체크 아웃하고 싶지 수도 있습니다 http://twitter.github.com/bootstrap/#tables – clyfe

관심이 없습니다 트위터 부트 스트랩은 많은 요소에 대해 18px 여백/패딩을 지정하므로 – Paramasivan

$ (this) .parent ('table.benefitstable tbody tr'). toggleClass ("highlight"); TD 요소는 행의 하위 요소가됩니까? 내가 가장 가까운() 거기에 대한 사용의 확실하지 않아요 ...

출처

2011-12-30 21:29:17

내 추측은 그/그녀가 실제로't'가 아니라'a'를 선택했기 때문입니다. –

호버 (Hover)는 첫 번째 열의 링크 위에 마우스를 올렸을 때만 작동해야합니다. – Paramasivan

나는 실제로 이것 역시 잘 해냈다. $ (this) .parent(). parent(). 가장 좋은 방법은 아니지만 Jquery parentsUntil ('tr') 함수는 원하는 부모 노드가 아니라 실제 부모가 될 수있는 TR로 이동합니다. 부모님이 필요로하는 것은 그것을 포함합니다() 또는 이와 유사한 것, IMO입니다. 죄송합니다 ('a') 부분을 놓쳤습니다 ... –

테이블 행의 jQuery 강조 표시

답변

관련 문제