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而不是通过添加“ stripe”类名称来划分的。

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类“条纹”，那么这里是一个快速的＆amp;脏版本：

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

Answer 4

这是与@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)");
                        }
                    )
                }
            });

Answer 5

我的答案基于@Jacob和@yehuda的建议。对于需要“ .table-striped”和“ .table-hover”行为的表，它与bootstrap4一起使用。悬停部分是由CSS处理的，这使其效率更高（在测试@yehuda的代码段时，我注意到由于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');
        }
    });

Answer 6

对我来说，这对于隐藏行可以正常工作，并按预期重新应用条纹：

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

隐藏行后重新应用表条带化（Twitter Bootstrap）

6 个答案: