隐藏行后重新应用表条带化(Twitter Bootstrap)

Question

我正在使用Bootstrap并有一个条带表,可以通过选择表单上的一些选项来过滤.Javascript解释表单输入,并隐藏表中与所选条件不匹配的行.

但是,这会破坏表格上的表格条带,具体取决于隐藏的行(灰色行旁边的灰色行,下一个白色行的白色行).

我想根据过滤结果后可见的行重新应用条带化.我怎样才能做到这一点？

在表行上使用.remove()不是一个选项,因为如果过滤条件发生变化我可能需要再次显示它们并且我试图避免使用AJAX根据过滤器输入动态更新表(我是喜欢坚持隐藏DOM元素).

任何帮助表示赞赏!如果需要,我可以澄清这个问题:)

Answer 1

是的,这绝对是表条带化的烦人部分之一.这里valor的更好部分可能只是在每次更新后用jQuery重新应用条带化:

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

Answer 2

好像Bootstrap 4有不同的实现.按照上面@ Anthony的回答,这就是它的工作原理.

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

表现在由纯CSS条带化,而不是添加"条带"类名.

Answer 3

安东尼的回答对我不起作用.首先,它不隐藏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类"条带",那么这里是一个快速而又脏的版本:

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