Filterable Bootstrap table with striped zebra CSS styling

Check out the fiddle I created: http://jsfiddle.net/52aK9/239/

In the fiddle, you may notice that the first two rows are supposed to be grey and the table's zebra or striped design is not displaying correctly as expected.

I've attempted various methods to fix this issue, but so far, none of them have been successful.

Below is the code snippet:

$(document).ready(function () {

(function ($) {

    $('#filter').keyup(function () {

        var rex = new RegExp($(this).val(), 'i');
        $('.searchable tr').after('<tr></tr>').hide();
        $('.searchable tr').filter(function () {
            return rex.test($(this).text());
        }).show();

    })

    }(jQuery));

});

Does anyone know how to ensure that the striping of the table rows always works properly?

Answer №1

Recently experimented with bootstrap and JavaScript

to enhance your code

$(document).ready(function () {

(function ($) {

    $('#filter').keyup(function () {

        var rex = new RegExp($(this).val(), 'i');
        $('.searchable tr').after('<tr></tr>').hide();
        $('.searchable tr').filter(function () {
            return rex.test($(this).text());
        }).show();

    })

    }(jQuery));

});

Here is a link to the fiddle that I used, it might be useful for you

http://jsfiddle.net/52aK9/241/

Answer №2

To maintain the integrity of the data in the table, I suggest storing it as a single object and rebuilding the table each time you adjust the filter. The issue with the striped pattern not working is due to simply hiding rows that are not desired to be seen. These hidden rows still exist in the document, causing the CSS rules to treat them as if they were visible. So, even if the 2nd row is hidden, the 3rd row remains the 3rd row according to the CSS and retains its original color. Rebuilding the table without including the unwanted rows should resolve this problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The notification panel pop-up box keeps moving away from the right side

I'm currently in the process of creating a straightforward vertical notification panel, similar to the one seen on Stack Overflow. However, I've encountered an issue where the pop-up is not staying positioned correctly to the right side. It behav ...

MUI: The fontFamily property is not able to be overridden by nesting within the

My goal is to have different fonts for different parts of my application using theme nesting. Unfortunately, I discovered that theme nesting doesn't work when it comes to overriding fonts. In my App.js file: import React from "react"; impor ...

AngularJS is failing to recognize the onload event when loading a URL

I am currently working with the AngularJS Framework and I have encountered an issue. My directive only seems to work when the window is fully loaded. screensCreators.directive('createscreen', function () { return { restrict: "A", ...

Heroku Environment causing SocketIO malfunction while it works perfectly in Localhost

While working on a chat program using NodeJS and SocketIO, I faced an issue when deploying it to Heroku Server. It turns out that SocketIO was not functioning properly in the Heroku environment. Upon checking the logs in Heroku, I found no relevant inform ...

If a dynamic route does not exist in NextJS, display a 404 error. Otherwise, show a loading spinner

I am facing an issue with the dynamic routes in my NextJS app, specifically /team/[id]. When the page loads, it queries the API to retrieve information based on the team ID. If the ID does not exist in the API, a 404 error is returned. However, I am strugg ...

What is the best method for retrieving the entire row data based on the maximum value in a column?

function findMaxValue() { var highestValue = Math.max.apply(Math, $('.sira').map(function() { return $(this).text() })) alert(highestValue); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"& ...

Make toggleClass show up smoothly without disappearing

I'm currently working with jQuery's toggleClass() method and I want to achieve a fade-in effect without the corresponding fade-out animation. Using the "duration" attribute applies the same duration for both actions, which is not what I want. I w ...

Proper way to utilize JSON.parse() function and handle invalid JSON data

After using JSON.parse(myJSONString), the resulting file is not a valid JSON format. I'm working in a nodejs environment and struggling to identify the issue in my code. I utilized XML2JS to convert an XML API call to JS. Although I have thoroughly i ...

Guide for identifying the dynamically changing last 'li' element within a 'Ul' using a Selenium driver

<ul class="drillDownMenu l_drillDown" style="left: -498px;"> <li class="hasSubs"> <a id="RAL10" href="javascript:;"> <ul class="active"> <li class="hasSubs"> <li class="hasSubs"> <a id="AL101117" href="javascript:;"&g ...

Sending data to and retrieving data from a server

Just a quick query. I've been using ajax POST and GET methods to send JSON data to a server and then fetch it back. However, I'm facing some confusion while trying to extract JSON information from the GET call. getMessage = function(){ $.ajax ...

Loading JavaScript in the background using Java and HtmlUnit

I am currently facing a challenge while navigating a website using HtmlUnit. This particular website adjusts certain buttons and displays or hides certain elements based on JavaScript events. For instance, there is a text input box along with a button th ...

Adding DIV elements within a Bootstrap Carousel

I've successfully placed containers inside my Bootstrap Carousel slides that overlay the image with text and a link. It looks great initially, but I'm facing an issue where after switching to the next slide, I can't return to the one with th ...

Revolutionizing user experience: New feature seamlessly triggers button actions with the power of "enter"

I need assistance with modifying a form that contains two buttons and several text inputs. Currently, if the enter key is pressed, it triggers a click event on the first button. However, I want to modify this behavior so that if any of the text boxes are f ...

What is the best way to create router links on the fly in Vue.js?

I am currently exploring how to achieve the following in Vue.js <table> <tr v-for="item in messages"> <td><router-link to="'/user/' + item.id">{{ item.name }}</router-link></td> </tr> < ...

Identifying the element with the specified ID within the table's <th> tag in JavaScript

I want to create a table with the title: Summary Statement as of August 3, 2017 at 12:55 The date is functioning properly using JavaScript in other parts of the code, but not in this section. Is there a specific technique I should be aware of? The rest of ...

What is the best way to reset an event back to its original state once it has been clicked on again

As a newcomer to web development, I'm currently working on creating my own portfolio website. One of the features I am trying to implement is triangle bullet points that can change direction when clicked - kind of like an arrow. My idea is for them to ...

Script on the server side using Node.JS to make updates to a JSON file

I'm in the process of developing a NODE.JS file to update a JSON file with data coming from the client. The POST method is functioning correctly, but I am facing issues with the GET command. I was thinking about alternative approaches to tackle this i ...

Obtaining modifications to the body in Wicket through jQuery

Can you help me with an issue I'm having involving Wicket and jQuery? I have a WebPage rendered by Wicket, with a "draggable" and "droppable" component that allows users to move items using jQuery. The goal is for the "Save" button at the end of the p ...

What is the best method for transforming a base64 encoded string into a base64 formatted PDF string?

Could someone please help me with a problem I'm facing? I am utilizing an AngularJS .pdf viewer that displays documents in a modal using base64. Everything works smoothly when the base64 is generated from a .pdf file. The backend (Java) generates th ...

Error encountered: Unable to assign onClick property to null object

Hey everyone, I'm running into an issue with my JavaScript. It keeps throwing a TypeError: Cannot set properties of null (setting 'onclick') at SignUp.js:4:43 <HTML> <body> <div class="input-box"> <span class="deta ...