我在jQuery中（至少就我的标准而言）正在从事一些复杂的工作，并且完全停留在前进的方向上。我或多或少地在脑海中看到了该结构，但是很难将其写下来以正确地运行jQuery代码：
单击下一个或上一个时，下一个或上一个列应突出显示，这可以正常工作。
一旦到达最后一列（R6），然后单击下一步，就会出现一个新元素（R7），并且应该删除R1。 R7和其他cols已经在html中，但是CSS使其不可见。
如何使R7出现而R1消失等等？
看不见的表格已经在html代码中，您可以在右上角的表格中看到它的种族描述，单击R6之后，它将继续从R7上升到R12。
我心中的逻辑是这样的：
当用户到达最后一个可见的R并单击下一步时，将“不可见”类添加到左侧的R中，并将“可见”类添加到右侧的R中。 Ť
当用户单击上一个按钮时，应执行上述相反的操作。
棘手的部分是，一旦下一个Rn出现在最后一个Rn，它就会出现。
感谢您查看我的代码：http://jsfiddle.net/yunowork/hVHZb/
最佳答案
这是一个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的倍数。