我正在使用 Bootstrap 并有一个条纹表，可以通过在表单上选择一些选项进行过滤。 Javascript 解释表单输入，并隐藏表格中与所选条件不匹配的行。
但是，这会根据隐藏的行（灰色行旁边的灰色行，白色行旁边的白色行）打破表格上的表格条带化。
我想根据过滤结果后可见的行重新应用条带化。我怎样才能做到这一点？
在表格行上使用 .remove() 不是一个选项，因为如果过滤条件发生变化，我可能需要再次显示它们，并且我试图避免使用 AJAX 根据过滤器输入动态更新表格（我想坚持隐藏 DOM 元素）。
感谢任何帮助！如果需要，我可以澄清问题:)
【问题讨论】：
标签： javascript jquery html css twitter-bootstrap
是的，这绝对是表格条带化的烦人部分之一。这里的 valor 更好的部分可能只是在每次更新后使用 jQuery 重新应用条带化：
$("tr:not(.hidden)").each(function (index) {
$(this).toggleClass("stripe", !!(index & 1));
});
【讨论】：
Anthony 的answer 对我不起作用。首先，它不会隐藏 Bootstrap 表类 table-striped，其次，没有（或至少看起来没有）表行的内置类 stripe。
这是我的方法，我在表格中过滤了 id 为“reports”的行。
如果您为<tr> 元素定义类“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");
}
});
【讨论】：
.table-hover 应用的悬停类，因为内联样式优先。我肯定会选择使用课程。
.stripe 类的第二个实例添加到每隔一行，因为您已经将它添加到之前 2 行的所有内容中。这样做而不是破坏它的更有效方法是在 if 语句之前删除第一个 $(this).addClass("stripe");。这样，您只需将类添加到需要它的部分，而不是将其添加到所有内容中，然后将其从不需要的部分中删除，我相信您正在尝试这样做。
这与@Jacobski 的answer 的答案相同，但会保持引导表悬停的悬停效果。
$("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)");
}
)
}
});
【讨论】：
我的答案基于@Jacob 和@yehuda 的建议。 这适用于 bootstrap4，对于需要“.table-striped”和“.table-hover”行为的表。 悬停部分由 CSS 处理，这使其效率更高（在测试 @yehuda 的 sn-p 时，我注意到由于 javascript 处理程序导致的小延迟）。
// CSS
<style>
.table-striped tbody tr.visible-odd {
background-color: rgba(0, 0, 0, 0.05);
}
.table-striped tbody tr.visible-even {
background-color: rgba(0, 0, 0, 0.00);
}
.table-hover tbody tr.visible-even:hover {
background-color: rgba(0, 0, 0, 0.075);
}
</style>
// JS
$("tr:visible").each( function(index, obj) {
if (index % 2) {
$(this).addClass('visible-odd').removeClass('visible-even');
} else {
$(this).addClass('visible-even').removeClass('visible-odd');
}
});
【讨论】：
对我来说，这适用于隐藏行并按预期重新应用条带化：
$("table#ProductTable").removeClass("table-striped");
$("table#ProductTable").addClass("table-striped");
【讨论】：
@Jacobski 的answer 很棒，但是我有一些页面包含多个表格，并且标题行的背景会在单独的表格上发生变化。此外，我的表格行总是可见的，“手风琴切换”类不确定这是否是引导程序 5 的东西，但这就是我的目标！ （我也不懂 JavaScript，所以可能有更简洁的语法来做我所做的）
$("tr:visible").each(function (index) {
if ($(this).hasClass("tb-header")) {
rowIndex = 0; // need to reset the rowIndex since we are now on a new table!
} else {
if ($(this).hasClass("accordion-toggle")) {
$(this).css("background-color", !!(rowIndex & 1)? "rgba(0,0,0,0)" : "rgba(0,0,0,.05)");
rowIndex++;
}
}
});
【讨论】：