jQuery를 사용하여 테이블을 숨기고 표시하십시오.

Question

jQuery에서 (최소한 내 기준에 따라) 복잡한 작업을하고 있으며 앞으로 나아갈 방법에 완전히 매달 렸습니다. 나는 더 많거나 적은 내 머리의 구조를 볼 수 있지만 데 어려움이 제대로 작동 jQuery 코드로 아래로 그것을 작성 :

• 다음 또는 이전 열이 강조되어야한다, 다음 또는 이전 클릭이 잘 작동합니다.
• 마지막 열 (R6)에 있고 다음을 클릭하면 새 요소 (R7)가 나타나야하며 R1을 제거해야합니다. R7 및 그 이상의 열은 이미 html에 있지만 CSS에서는 보이지 않습니다. R7이 나타나고 R1이 사라지는 등 어떻게 할 수 있습니까?

보이지 않는 테이블은 이미 html 코드에 있습니다. R6를 계속 클릭하면 레이스 설명이있는 오른쪽 상단 테이블에서 볼 수 있습니다. R12까지 계속됩니다.

내가 생각하고있는 논리는 다음과 같이이다 : 사용자가 마지막으로 볼 수있는 R에 도착하고 다음 클릭하면 왼쪽에있는 R에 '보이지 않는'클래스를 추가하고 클래스 '볼'을 추가

• 오른쪽의 R에. T
• 이전에 사용자가 클릭하면 위와 반대가 발생합니다.

까다로운 부분은 .. 그것이 마지막에되면 다음 Rn의 표시 얻기 위해 내 코드를 조사하기위한

감사입니다 : 여기 http://jsfiddle.net/yunowork/hVHZb/

Answer 1

당신이 원하는대로 작동하는 update of your fiddle입니다 .

if ($nextCol.hasClass("invisible")) { 
     $nextCol.removeClass("invisible");   
     $nextCol.addClass("visible"); 
     var $toRem = $nextCol.prev('td').prev('td').prev('td').prev('td').prev('td').prev('td'); 
     $toRem.removeClass("visible"); 
     $toRem.addClass("invisible"); 
    } 

previous에 대한 유사한 코드가있다 :

이

내가 새 열을 표시하고 이전을 숨기기 위해 추가 된 코드입니다. 나는 또한 여분의 열이 그 이해 범위 내에 들도록 헤더 열 12의 colspan을 만들었습니다.

코드의 "추악한 부분"은 제거 할 열을 찾는 방법입니다. 나는 방금 6 개의 열을 역 추적하고 그 열을 숨기기로 결정했습니다. 이상적으로 그 기능을 추상화하여보다 유연하게 만들고 싶을 것입니다.

편집 : Updated fiddle with fixed prev bug. if 진술에이 내용을 추가했습니다 : if($prevCol.length != 0 && $prevCol.index() >= 8). 나는 왜 8이 숫자인지 확신하지 못한다. (나는 2가되어야한다고 생각한다.) 그러나 4의 배수로 보인다.