Javascript 使用jQuery在表中隐藏和显示额外列

我正在为我的标准做一些复杂的工作，至少在jQuery中是这样，我完全被困在如何前进的问题上。我或多或少在脑海中看到了这种结构，但在将其写入正常工作的jQuery代码时遇到了困难：

单击“下一个”或“上一个”时，应高亮显示“下一个”或“上一个”列，这样可以正常工作。 到达最后一列R6并单击“下一步”后，应显示一个新元素R7，并且应删除R1。R7和其他COL已经存在于html中，但通过CSS使其不可见。 如何使R7出现，R1消失等等？ 不可见的表已经在html代码中，您可以在右上角的表中看到它，以及比赛描述。一旦您单击R6，它将继续到R7，直到R12

我脑子里的逻辑是这样的：

当用户到达最后一个可见的R并单击下一步时，将类“不可见”添加到左侧的R，并将类“可见”添加到右侧的R。T 当用户单击“上一步”时，应发生与上述相反的情况。 棘手的部分是，一旦下一个Rn出现在最后一个Rn上，它就会出现

感谢您查看我的代码：

这是一个可以根据您的喜好工作的

这是我添加的代码，用于显示新列并隐藏上一列：

    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");
    }

以前的版本有类似的代码。我还制作了标题列12的colspan，以便额外的列也在其控制范围内

代码中唯一难看的部分是如何找到要删除的列。我只是决定回溯6列并隐藏其中一列。理想情况下，您希望将该功能抽象出来并使其更加灵活

---

编辑：。我在if语句中添加了这个：if$prevCol.length！=0&&$prevCol.index>=8。我不确定为什么8是我认为应该是2的数字，但它似乎是4的倍数

太棒了！代码写得很好，非常感谢！在R1中单击“上一步”时，我遇到了一个小错误，有没有办法停用R1上的“下一步”按钮？更新的答案。很高兴你喜欢它！请随意投票并接受它=很好，正是我所需要的！接受它，还不能投票，只要我有足够的分数就可以了。谢谢你的帮助，非常感谢。