Повторите таблицу полосания после сокрытия строк (Twitter Bootstrap)

Я использую Bootstrap и имею полосатую таблицу, которую можно отфильтровать, выбрав некоторые параметры в форме. Javascript интерпретирует входные данные формы и скрывает строки из таблицы, которые не соответствуют выбранным критериям.

Однако это разбивает таблицу на таблицу в зависимости от того, какие строки скрыты (серые строки рядом с серыми строками, белые строки следующие белые строки).

Я хотел бы повторно применить разбивку на основе того, какие строки видны после фильтрации результатов. Как я могу это сделать?

Использование .remove() в строках таблицы не является опцией, потому что мне может потребоваться показать их снова, если меняются критерии фильтра, и я пытаюсь избежать использования AJAX для динамического обновления таблицы на основе входных данных фильтра ( Я хотел бы придерживаться скрытия элементов DOM).

Любая помощь приветствуется! Я могу уточнить вопрос, если необходимо:)

Ответ 1

Да, это определенно одна из раздражающих частей таблицы. Лучшая часть доблести здесь, вероятно, только для того, чтобы повторно использовать чередование с jQuery после каждого обновления:

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

Ответ 2

Ответ Энтони не сработал у меня. Во-первых, он не скрывает класс таблицы Bootstrap table-striped, а во-вторых, нет (или, по крайней мере, не является) встроенным классом stripe для строк таблицы.

Здесь мой подход, где я фильтровал строки в таблице с идентификатором "отчетов".

Здесь используется версия, если вы определяете класс "stripe" для элементов <tr>:

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