使用jQuery隱藏和顯示額外的柱子在桌子內使用jQuery

我正在jQuery中處理複雜的事情（至少我的標準），並完全停留在如何前進。我或多或少看到我頭上的結構，但有困難的把它寫下來到正常工作jQuery代碼：使用jQuery隱藏和顯示額外的柱子在桌子內使用jQuery

一個或下一個，下一個或前一列應該強調一下時，這工作正常。
一旦你在最後一列（R6），並點擊下一個新元素應該出現（R7）和R1應該被刪除。 R7和其他cols已經在html中，但是用CSS隱藏起來。我該如何讓R7出現而R1消失等等？

無法使用的表格已經在html代碼中，您可以在比賽描述右上角的表格中看到它，一旦進一步點擊R6，它將繼續R7到R12。

我在我的腦海的邏輯是這樣的：

當用戶到達最後一個可見的R和下次點擊，添加類「無形」到R左側，並添加類「可見的」到右邊的R. T
當用戶點擊前面的時候，會發生上述的相反情況。

棘手的部分是獲得下一個Rn中出現一次是在最後一個..

感謝您尋找到我的代碼：http://jsfiddle.net/yunowork/hVHZb/

來源

2012-09-07 Yunowork

這裏是一個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列並隱藏那一列。理想情況下，您希望將該功能抽象出來並使其更加靈活。編輯：。我在if聲明中加入了這個：if($prevCol.length != 0 && $prevCol.index() >= 8)。我不知道爲什麼8是數字（我認爲它應該是2），但它似乎走在4的倍數。

來源

2012-09-07 17:41:01 Claudiu

只是太棒了！寫得很好的代碼，非常感謝！當在R1中點擊前一個時，我遇到了一個小錯誤，是否有任何方法可以停用R1上的下一個按鈕？ – Yunowork

更新了答案。很開心你喜歡！隨時upvote以及接受它=） – Claudiu

不錯，只是我需要！接受它，不能upvote，一旦我有足夠的分數就會做。感謝您的幫助，非常感謝。 – Yunowork

使用jQuery隱藏和顯示額外的柱子在桌子內使用jQuery

回答

相關問題