jquery hover range of td

Question

나는 여기에서 새로운이야, 내가 원하는 것에 대한 비슷한 대답을 찾을 수 없다; 나는 진전을 이루었고 앞으로 나아갈 수 없다. 아래는 내 칼집입니다. 2 ~ 2 번째 TR 사이를 가리키면 색상이 바뀝니다. (첫 번째 TR은 제목이고 마지막 TR은 바닥 글). 마우스를 놓을 수있는 범위 사이에서 선택할 수있는 방법은 두 번째 TD와 두 번째 마지막 TD 만 포함하는 것입니다.

$('table#tblSchoolList tr:gt(0)').hover(function(){ 
    ////and not the last child (.next length = 0 means last) 
    if ($(this).next().length != 0){ 
     $(this).css("background", "red"); 
    } 
}, function(){ 
    $(this).css("background", ""); 
}) 

즉, 테이블 호버는 첫 번째 및 마지막 TR 및 TD를 제외합니다.

TIA.

Answer 1

: 여기

$('#foo tr').slice(1,-1).hover(function(){ 
    $(this).find('td').slice(1,-1).toggleClass('highlight'); 
}); 

은 매우 간단한 예제

다음 선택자와 함께 .find()을 사용하여 각각 tr의 첫 번째 및 마지막 td을 제외 할 수 있습니다.

$('table#tblSchoolList tr:gt(0)').hover(function() { 
    if ($(this).next().length != 0) { 
     $(this).find('td:not(:first-child, :last-child)').css("background", "red"); 
    } 
}, function() { 
    $(this).find('td:not(:first-child, :last-child)').css("background", ""); 
}); 

마우스가 첫 번째 및 마지막 td 초를 초과하더라도 함수가 계속 트리거되지만 채색되지는 않습니다.

jsFiddle demo

또한 if 문에 대한 필요성을 제거, 당신의 tr들과 함께 선택기를 사용할 수 있습니다 약간 좋아요 ~로

---

$('table#tblSchoolList tr:not(:first-child, :last-child)').hover(function() { 
    $(this).find('td:not(:first-child, :last-child)').css("background", "red"); 
}, function() { 
    $(this).find('td:not(:first-child, :last-child)').css("background", ""); 
}); 

, 나는 내가 변환 할 수 있었다 발견 모든 jQuery 코드를 하나의 CSS 규칙 (최신 브라우저에서만 작동) :

당신은 오래된 브라우저와의 호환성을 원하거나 위의 CSS의 의미 :

jsFiddle demo

Answer 2

이 같은 slice를 사용하여 시도 할 수 있습니다 :

$('table#tblSchoolList tr').slice(1,-1).hover(function(){ 
    $(this).css("background", "red"); 
}, function(){ 
    $(this).css("background", ""); 
}); 

음수가 목록의 끝에서 오프셋을 지정하여. 그래서 :

slice(
    1, // omit first row 
    -1 // omit last row 
) 

이상 단순히 :

$('table#tblSchoolList tr').slice(1,-1).hover(function(){ 
    $(this).toggleClass('highlight'); 
}); 

(당신은 색상 반응을 처리하기 위해 highlight 클래스가 가정).

---

편집 :는 첫 번째와 마지막 열뿐만 아니라 행을 보장하기 위해 업데이트, 강조 표시되지 않습니다 (감사 @boltclock) : http://jsfiddle.net/redler/Mgd8f/