How to perform a real time search and filter on a HTML table

0 votes

I've been Googling and searching Stack Overflow for a while, but I just can't get around this problem.

I have a standard HTML table, containing, say, fruit. Like so:

<table>
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

Above this I have a text box, which I would like to search the table as a user types. So, if they type Gre for example, the Orange row of the table would disapear, leaving the Apple and Grapes. If they carried on and typed Green Gr the Apple row should disapear, leaving just grapes. I hope this is clear.

And, should the user delete some or all of their query from the text box, I should like all of the rows that now match the query to reappear.

While I know how to remove a table row in jQuery, I have little idea about how to go about doing the search and removing rows selectively based on this. Is there a simple solution to this? Or a plugin?

If anyone could point me in the right direction it would be brilliant.

Thank you.

Jun 13, 2022 in JQuery by gaurav
• 23,260 points
3,015 views

1 answer to this question.

0 votes

How to use it:

  1. Add filters to your HTML tables' header columns as follows: < table class = "table" > < thead > 
  2. Load the main script Filter. js after loading the latest jQuery library. 
  3. Load the necessary stylesheet when needed. view source. 
  4. Add a rows counter to the bottom of the table. 
    Image result for How to perform a real time search and filter on a HTML table
answered Jun 13, 2022 by rajatha
• 7,640 points

Related Questions In JQuery

0 votes
1 answer

How to Disabling and enabling a html input button?

Hello @kartik, Using jQuery Disabling a html button $('#Button').attr('disabled','disabled'); Enabling a ...READ MORE

answered Nov 26, 2020 in JQuery by Niroj
• 82,880 points
1,062 views
0 votes
1 answer

How to make a simple modal pop up form using jquery and html?

Create A Modal <button onclick="document.getElementById('id01').style.display='block'" class="w3-button">Open Modal</button> ... <div ...READ MORE

answered Jun 2, 2022 in JQuery by Edureka
• 13,670 points
6,725 views
0 votes
1 answer

How to get all css properties and events of a html element with jquery or other libraries?

You can get the computed value of ...READ MORE

answered Jun 14, 2022 in JQuery by gaurav
• 23,260 points
682 views
0 votes
1 answer

How to Get the real width and height of an image with JavaScript?

Hello, Webkit browsers set the height and width ...READ MORE

answered Nov 25, 2020 in JQuery by Niroj
• 82,880 points
489 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,510 points
973 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
14,124 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
22,370 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,880 points
2,944 views
0 votes
1 answer

How to trigger a click on a link using jQuery

$( "#foo" ). trigger( "click" ); As of jQuery ...READ MORE

answered Jun 10, 2022 in JQuery by rajatha
• 7,640 points
526 views
0 votes
1 answer

How to trigger a click on a link using jQuery

Use the jQuery click() Method You can use ...READ MORE

answered Jun 10, 2022 in JQuery by rajatha
• 7,640 points
1,158 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP