Javascript 隐藏行后重新应用表条带化（Twitter引导）

我使用的是Bootstrap，有一个条带化的表，可以通过在表单上选择一些选项进行过滤。Javascript解释表单输入，并从表中隐藏与所选条件不匹配的行

但是，这会根据隐藏的行（灰色行旁边的灰色行，白色行旁边的白色行）来断开表上的表条带

我想根据过滤结果后可见的行重新应用条带。我该怎么做

在表行上使用.remove（）不是一个选项，因为如果筛选条件更改，我可能需要再次显示它们，并且我试图避免使用AJAX根据筛选输入动态更新表（我希望继续隐藏DOM元素）

---

感谢您的帮助！如果需要，我可以澄清这个问题：）

是的，这绝对是表格条带化中令人讨厌的部分之一。valor更好的部分可能只是在每次更新后使用jQuery重新应用条带：

$("tr:not(.hidden)").each(function (index) {
    $(this).toggleClass("stripe", !!(index & 1));
});

---

安东尼的回答对我不起作用。首先，它不会隐藏带条带化的引导表类

表

，其次，没有（或至少看起来没有）表行的内置类

条带

这是我的方法，我过滤了id为“reports”的表中的行

如果您为

元素定义类“stripe”，请使用以下版本：

// un-stripe table, since bootstrap striping doesn't work for filtered rows
$("table#reports").removeClass("table-striped");

// now add stripes to alternating rows
$rows.each(function (index) {
  // but first remove class that may have been added by previous changes
  $(this).removeClass("stripe");
  if ( index % 2 == 0) {
    $(this).addClass("stripe");
  }
});

如果您懒得定义CSS类“stripe”，那么这里有一个快速脏版：

// un-stripe table, since bootstrap striping doesn't work for filtered rows
$("table#reports").removeClass("table-striped");

// now add stripes to alternating rows
$rows.each(function (index) {
  // but first remove color that may have been added by previous changes:
  $(this).css("background-color", "inherit");
  if ( index % 2 == 0) {
    $(this).css("background-color", "#f9f9f9");
  }
});

---

看起来Bootstrap4有一个不同的实现。按照上面@Anthony的回答，这就是它的工作原理

    $("tr:visible").each(function (index) {
        $(this).css("background-color", !!(index & 1)? "rgba(0,0,0,.05)" : "rgba(0,0,0,0)");
    });

---

表现在由纯CSS条带化，而不是添加“条带”类名。

这与@Jacob的答案相同，但将保持引导表悬停的悬停效果

           $("tr:visible").each(function (index) {
                $(this).css("background-color", !!(index & 1) ? "rgba(0,0,0,.05)" : "rgba(0,0,0,0)");
                if (!(index & 1)) {
                    $(this).hover(
                        function () {  //On hover over
                            $(this).css("background-color", "rgba(0,0,0,.07)");
                        },
                        function () {  //On hover out
                            $(this).css("background-color", "rgba(0,0,0,0)");
                        }
                    )
                }
            });

---

我的答案建立在雅各布和耶胡达的建议之上。 这适用于bootstrap4，对于需要“.table striped”和“.table hover”行为的表。 悬停部分由CSS处理，这使得它更加高效（在测试@yehuda的代码片段时，我注意到由于javascript处理程序而产生的一个小延迟）

//CSS
.桌上带条纹的t车身tr.可见-奇数{
背景色：rgba（0,0,0,0.05）；
}
.桌上带条纹的车身tr.可见-均匀{
背景色：rgba（0,0,0,0.00）；
}
.桌面悬停t车身tr.可见-偶数：悬停{
背景色：rgba（0,0,0,0.075）；
}
//JS
$（“tr:visible”）。每个（函数（索引，obj）{
如果（索引%2）{
$（this.addClass（'visible-odd'）。removeClass（'visible-偶数'）；
}否则{
$（this.addClass（'visible-偶数'）。removeClass（'visible-odd'）；
}
});

对我来说，这可以很好地处理隐藏行，并按预期重新应用条带：

$("table#ProductTable").removeClass("table-striped");
$("table#ProductTable").addClass("table-striped");

---

关于这个主题的非常好的文章，提供了许多解决方案：谢谢！我会试试这个，然后再给你回复。是的，有一些解决方案，你可以移动行，你有非常疯狂的CSS技巧，但是在这种情况下，你知道什么时候会发生更新，所以我会做一些无聊的事情。：）如果您使用的是Bootstrap 4，请参见下面我的修改答案：）上面的内容将终止可以使用

.table hover应用的hover类，因为内联样式优先。我肯定会选择使用类。在第一个代码块中，您每隔一行添加一个class
.stripe
的第二个实例，因为您已经在前面两行将其添加到了所有内容中。更有效的方法是删除第一个
$（this.addClass（“stripe”）。这样，你只是将类添加到需要它的内容中，而不是将它添加到所有内容中，然后从不需要的内容中删除它，我相信你正在尝试这样做。@mikemike:哎呀，第一个addClass就是要删除类的…：冲洗：非常干净和简单。在我的Bootstrap 4页面上工作完美，没有任何修改。
$("table#ProductTable").removeClass("table-striped");
$("table#ProductTable").addClass("table-striped");