javascript - para - ocultar card bootstrap

Volver a aplicar la división de la tabla después de ocultar las filas(Twitter Bootstrap)

Question

Estoy usando Bootstrap y tengo una tabla de rayas que se puede filtrar seleccionando algunas opciones en un formulario. Javascript interpreta las entradas del formulario y oculta las filas de la tabla que no coinciden con los criterios seleccionados.

Sin embargo, esto rompe la división de la tabla en la tabla dependiendo de qué filas están ocultas (filas grises junto a filas grises, filas blancas junto a las filas blancas).

Me gustaría volver a aplicar la división en función de qué filas son visibles después de filtrar los resultados. ¿Cómo puedo hacer esto?

El uso de .remove () en las filas de la tabla no es una opción, ya que es posible que deba mostrarlos nuevamente si los criterios del filtro cambian y estoy tratando de evitar el uso de AJAX para actualizar la tabla de forma dinámica en función de las entradas del filtro. me gusta atenerse a ocultar elementos DOM).

Cualquier ayuda es apreciada! Puedo aclarar la pregunta si es necesario :)

Answer 1

Esta es la misma respuesta que @Jacob, pero mantendrá el efecto de desplazamiento de un bootstrap table-hover.

           $("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 2

La respuesta de Anthony no funcionó para mí. En primer lugar, no oculta la table-striped tabla de Bootstrap, y en segundo lugar, no hay (o al menos no parece ser) una stripe clase incorporada para las filas de la tabla.

Aquí está mi enfoque, donde he filtrado filas en una tabla con un id de "informes".

Aquí hay una versión para usar si define la clase "banda" para los elementos <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");
  }
});

Si eres demasiado perezoso para definir la "banda" de la clase CSS, aquí tienes una versión rápida y sucia:

// 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 3

Mi respuesta se basa en lo que sugirieron @Jacob y @yehuda. Esto funciona con bootstrap4, para una tabla que necesita el comportamiento de ".table-striped" y ".table-hover". La parte flotante es manejada por CSS, lo que la hace más eficiente (noté un pequeño retraso debido al controlador de javascript, al probar el fragmento de @yehuda).

    // 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 4

Para mí esto funciona bien con filas ocultas y vuelve a aplicar el trazado como se esperaba:

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

Answer 5

Parece que Bootstrap 4 tiene una implementación diferente. Siguiendo la respuesta de @ Anthony, esta es la forma en que funcionaría.

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

Las tablas ahora están divididas en CSS puro y no agregando el nombre de clase "banda".

Answer 6

Sí, esta es definitivamente una de las partes molestas de la creación de bandas en la mesa. La mejor parte del valor aquí es probablemente volver a aplicar la división con jQuery después de cada actualización:

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