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 can't seem to find a solution.

I have a standard HTML table with, say, fruit in it. As an example:

<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 is a text box, into which I'd like to search the table as the user types. As a result, if they type Gre, the Orange row of the table would disappear, leaving only the Apple and Grapes. If they kept typing Green Gr, the Apple row should disappear, leaving only grapes. I hope this makes sense.

And, if the user deletes part or all of their query from the text box, I want all of the rows that now match the query to reappear.

While I know how to remove a table row in jQuery, I'm not sure how to do the search and remove rows selectively based on this. Is there a straightforward solution? Or perhaps a plugin?

It would be fantastic if someone could point me in the right direction.

Aug 4 in HTML by Abhinaya
• 760 points
16 views

1 answer to this question.

0 votes

Here is the best solution for searching inside the HTML table while covering all of the table, (all td, tr in the table), pure javascript, and as short as possible:

<input id='myInput' onkeyup='searchTable()' type='text'>

<table id='myTable'>
   <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>

<script>
function searchTable() {
    var input, filter, found, table, tr, td, i, j;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        for (j = 0; j < td.length; j++) {
            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                found = true;
            }
        }
        if (found) {
            tr[i].style.display = "";
            found = false;
        } else {
            tr[i].style.display = "none";
        }
    }
}
</script>
answered Aug 4 by Deepak
• 760 points

Related Questions In HTML

0 votes
0 answers
0 votes
0 answers

How to use HTML to print header and footer on every printed page of a document?

Can HTML pages be printed with unique ...READ MORE

Jul 12 in HTML by Ashwini
• 1,160 points
13 views
0 votes
0 answers

How to disabling and enabling a html input button?

let's say I have a button like  <input id="button" ...READ MORE

Jul 5 in HTML by Tejashwini
• 1,660 points
11 views
0 votes
0 answers

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

I've read the jQuery tutorials, but I'm ...READ MORE

Jul 24 in HTML by Ashwini
• 1,160 points
18 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,500 points
308 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,740 points
8,840 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,740 points
15,824 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,740 points
1,291 views
0 votes
1 answer

How to trigger a file download when clicking an HTML button or JavaScript?

For the button you can do <form method="get" ...READ MORE

answered Aug 4 in HTML by Deepak
• 760 points
15 views
0 votes
1 answer

How to set a border for an HTML div tag?

 you can use border-width:2px; border-style:solid; border-color:black; or as shorthand border: 2px solid ...READ MORE

answered Aug 4 in HTML by Deepak
• 760 points
8 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP