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

Hide and show extra colums withinin table using jQuery

本文关键字：jQuery 隐藏 显示 使用      更新时间：2023-09-26

我正在jQuery中处理一些复杂的事情（至少对于我的标准来说），并且完全不知道如何前进。我或多或少地在脑海中看到了这个结构，但很难将其写进正常工作的jQuery代码：

  • 单击"下一列"或"上一列"时，应高亮显示下一列或上一列，这样可以很好地工作
  • 一旦您到达最后一列（R6）并单击下一列，就会出现一个新元素（R7），并且R1应该被删除。R7和其他cols已经在html中，但使用CSS使其不可见。如何使R7出现，R1消失，依此类推

invisble表已经在html代码中，你可以在右上角的表中看到它和种族描述，一旦你再点击R6，它将继续到R7，直到R12。

我脑海中的逻辑是这样的：

  • 当用户到达最后一个可见的R并单击"下一个"时，将类"不可见"添加到左侧的R，并将类"可见"添加至右侧的R。T
  • 当用户单击上一个时，应该发生与上面相反的情况

棘手的部分是，一旦下一个Rn出现在最后一个。。

感谢您查看我的代码：http://jsfiddle.net/yunowork/hVHZb/

以下是您的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");
    }

colspan有类似的代码。我还制作了标题列12的if，使得额外的列也落入其掌握范围内。

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

编辑：更新了fiddle，修复了prev错误。我在if($prevCol.length != 0 && $prevCol.index() >= 8)语句中添加了以下内容：8。我不知道为什么CCD_6是数字（我认为应该是2），但它似乎是4的倍数。

相关文章：