Implement table styling after concealing rows (Twitter Bootstrap)

Question

Implement table styling after concealing rows (Twitter Bootstrap)

Hey there, I am currently working with Bootstrap and have a table that is striped. Users can filter this table by selecting different options on a form. The Javascript code I've written interprets the form input and hides rows in the table that don't meet the selected criteria.

My issue is that this filtering process disrupts the striping of the table row colors, causing adjacent gray rows to be next to one another and same for white rows.

I want to find a solution that will reapply the table striping based on the visible rows after the filtering has been done. Can anyone suggest how I might achieve this?

My aim is to avoid using .remove() on the table rows because I may need to show them again if the user changes the filter criteria. Additionally, I'm looking to steer clear of using AJAX to dynamically update the table based on filter inputs, preferring instead to stick with hiding DOM elements.

Your assistance would be greatly appreciated! Please let me know if you require further clarification :)

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

It appears that Bootstrap 4 has a unique approach to implementation. Referencing @Anthony's response, the following demonstrates how it functions:

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

Instead of applying the "stripe" class name, tables are now striped using purely CSS.

Answer 2

It appears that Bootstrap 4 has a unique approach to implementation. Referencing @Anthony's response, the following demonstrates how it functions:

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

Instead of applying the "stripe" class name, tables are now striped using purely CSS.

Answer 3

Answer №2

A common frustration with table striping is having to constantly reapply it after updates. The most efficient solution may be to utilize jQuery to reapply the striping each time:

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

Answer 4

A common frustration with table striping is having to constantly reapply it after updates. The most efficient solution may be to utilize jQuery to reapply the striping each time:

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

Answer 5

Answer №3

Anthony's solution didn't quite meet my needs. I found that it didn't successfully hide the Bootstrap table class table-striped, and there wasn't a readily available built-in class like stripe for formatting table rows.

Here's what I came up with to handle filtering rows in a table identified by the id "reports":

If you want to avoid defining a CSS class called "stripe" for <tr> elements, you can try this alternative:

// Remove striped styling from table as Bootstrap striping won't work for filtered rows
$("table#reports").removeClass("table-striped");

// Apply alternate row striping
$rows.each(function (index) {
  // Reset any previous color changes
  $(this).css("background-color", "inherit");
  if ( index % 2 == 0) {
    $(this).css("background-color", "#f9f9f9");
  }
});

This method provides a quick and easy way to achieve row striping without creating a separate CSS class.

Answer 6

Anthony's solution didn't quite meet my needs. I found that it didn't successfully hide the Bootstrap table class table-striped, and there wasn't a readily available built-in class like stripe for formatting table rows.

Here's what I came up with to handle filtering rows in a table identified by the id "reports":

If you want to avoid defining a CSS class called "stripe" for <tr> elements, you can try this alternative:

// Remove striped styling from table as Bootstrap striping won't work for filtered rows
$("table#reports").removeClass("table-striped");

// Apply alternate row striping
$rows.each(function (index) {
  // Reset any previous color changes
  $(this).css("background-color", "inherit");
  if ( index % 2 == 0) {
    $(this).css("background-color", "#f9f9f9");
  }
});

This method provides a quick and easy way to achieve row striping without creating a separate CSS class.

Answer 7

Answer №4

This answer mirrors the response from @Jacobski found here, while retaining the hover effect of a 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 8

This answer mirrors the response from @Jacobski found here, while retaining the hover effect of a 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 9

Answer №5

Taking inspiration from the suggestions of @Jacob and @yehuda, my approach enhances bootstrap4 tables with both ".table-striped" and ".table-hover" functionalities. To optimize performance, I utilized CSS for the hover effect instead of relying solely on JavaScript (as observed in a slight delay when testing @yehuda's snippet).

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

    // Custom 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 10

Taking inspiration from the suggestions of @Jacob and @yehuda, my approach enhances bootstrap4 tables with both ".table-striped" and ".table-hover" functionalities. To optimize performance, I utilized CSS for the hover effect instead of relying solely on JavaScript (as observed in a slight delay when testing @yehuda's snippet).

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

    // Custom 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 11

Answer №6

In my experience, I have found that reapplying striping on tables with hidden rows works well using the following code:

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

Answer 12

In my experience, I have found that reapplying striping on tables with hidden rows works well using the following code:

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

Answer 13

Answer №7

@Jacobski provided an excellent solution to my issue. However, I encountered a problem with multiple tables on my pages where the background of header rows would change separately. Additionally, the table rows that were always visible had the class "accordion-toggle," which I targeted in Bootstrap 5 fashion! (I'm not well-versed in JavaScript, so there might be a more efficient way to achieve what I did)

$("tr:visible").each(function (index) {
    if ($(this).hasClass("tb-header")) {
        rowIndex = 0; // Resets the rowIndex for new table iteration
    } else {
        if ($(this).hasClass("accordion-toggle")) {
            $(this).css("background-color", !!(rowIndex & 1)?  "rgba(0,0,0,0)" : "rgba(0,0,0,.05)");
            rowIndex++;
        }
    }
});

Answer 14

@Jacobski provided an excellent solution to my issue. However, I encountered a problem with multiple tables on my pages where the background of header rows would change separately. Additionally, the table rows that were always visible had the class "accordion-toggle," which I targeted in Bootstrap 5 fashion! (I'm not well-versed in JavaScript, so there might be a more efficient way to achieve what I did)

$("tr:visible").each(function (index) {
    if ($(this).hasClass("tb-header")) {
        rowIndex = 0; // Resets the rowIndex for new table iteration
    } else {
        if ($(this).hasClass("accordion-toggle")) {
            $(this).css("background-color", !!(rowIndex & 1)?  "rgba(0,0,0,0)" : "rgba(0,0,0,.05)");
            rowIndex++;
        }
    }
});

Implement table styling after concealing rows (Twitter Bootstrap)

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Setting elements relative to a div can be achieved by using CSS positioning properties

Is it possible to identify users using an iPhone while they are utilizing "Private Browsing" mode?

Fetch begins its journey to retrieve html content before reaching its intended destination

Retrieve JSON data by making an AJAX request to a PHP file using the POST method

Resolving peer dependency conflict during npm installation

jQuery: Issue with progress indicator not displaying or hiding correctly during AJAX requests

What is the best way to ensure a stable background image using CSS?

My email submission function is malfunctioning

Why is it necessary to use "new" with a Mongoose model in TypeScript?

Tips for changing font styles using Polymer

NodeJS's pending ajax post using SailsJS

Is there a bug causing the Admin LTE content height issue? Looking for solutions to fix it

Stopping background content from scrolling while using position: fixed

Is it possible to read the content from both the parent $(this) selector and its individual children

What is the best way to maintain an ongoing sum of multiple values using bacon.js?

Controlling Fabric in Three.JS

Revisiting Angular: The Curious Case of an Object Attribute Altering Attributes on Two Separate Objects

Leveraging the power of HTML5's details element for optimized printing

Having difficulty changing the $theme-color variable in bootstrap

Steps to update the package version in package.json file