2011-11-21 4 views
2

html과 jQuery를 사용하여 맞춤 캘린더를 디자인했습니다. 시작일에 k 일 (예 : 2 일)의 범위를 강조 표시하고 싶습니다. 내 캘린더에서 사용할 수있는 날짜는 '사용 가능'클래스입니다. 다음 코드는 내가 사용하고있는 코드 조각입니다 :jQuery next() td 테이블 행

불행히도 next()는 부모 행에서만 작동합니다. 이 문제는 행의 마지막 열에서 마우스를 가져갈 때 생깁니다.이 경우 한 열만 강조 표시됩니다. 다음 행에서 사용 가능한 TD를 선택하려면 next()를 오버로드하려면 어떻게합니까?

피들을 사용할 수 있습니다. http://jsfiddle.net/yL573/1/ 문제를보기 위해 26 일에 유혹을 시도하십시오. 26 위에 마우스를 올리면 27 또는 다음 '사용 가능'을 강조 표시해야합니다. k 일 (k> 1,이 경우 k = 2)을 선택하기 위해 이것을 일반화하고자합니다.

+1

두 행의 html을 표시해야합니다. –

+0

함께 작업중인 표의 마크 업을 게시 할 수 있습니까? 그렇지 않으면 추측 만 할 수 있습니다. 유용 할 수도 있지만 원하는만큼 구체적인 것은 아닐 수도 있습니다. –

답변

6

이렇게 될 수 있습니까? 난 당신의 개념에 대한 빠른 jsfiddle을했다

심지어 다른 행에 걸쳐 작동하고, 중간에 어떤 일이 이미 사용할 수없는 경우에도 알려

http://jsfiddle.net/dP3Bk/1/

(사용 가능한 클래스가없는)

이것이 예상 한대로라면

.next()을 사용하지 않고 모두 <td> 요소의 요소 색인을 사용합니다.

자바 스크립트 : 당신은 많은 요소가있는 경우

$('#tableid td.available').hover(function(){ 
    // mouse in 
    var available = $('#tableid td.available'); 
    var i = available.index($(this)); 
    $(available[i]).add($(available[i+1])).addClass('current'); 
}, function(){ 
    // mouse out 
    $('td.current').removeClass('current'); 
}); 

발언 이 성능 저하 될 수 있습니다. 어쨌든, 나는 모든 td.available 요소로 작업하지 않기 위해 선택자 앞에 테이블의 ID를 추가 할 것입니다.

+1

좋은 해결책이지만, 후손을 위해 답안에 관련 JS 코드를 게시하십시오. – Blazemonger

+0

감사합니다. Sander, 문제의 jsFiddle을 게시하기 전에 jsFiddle 솔루션을 게시했습니다. – user1058322

0

겸손한 제안 ... 요소가 행의 (n-1) 번째 자식인지 또는 심지어 n 번째 자식 ... n 번째 요소에 대해 n 번째 행의 첫 번째 자식과 n 번째 행의 첫 번째 자식을 강조 표시하면 10 번째 열의 행에있는 예가 9 번째 요소 인 경우 10 번째 열 및 다음 행 첫 번째 열은 선택한 클래스로 설정됩니다. 요소가 마지막 자식을 10 번째로 확인하고 다음에 부모 tr을 선택한 다음 첫 번째 두 개의 자식 td ....를 선택하면 조건부로 충분합니다. 추측해라. .. 나는 감각을 만들었다. ..... 건배!!

+0

좋은 제안이지만, k 일 간격으로 이것을 일반화 할 수 있습니까? – user1058322