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, 2022 in HTML by Abhinaya
• 1,160 points
2,991 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, 2022 by Deepak
• 980 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, 2022 in HTML by Ashwini
• 5,430 points
3,556 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, 2022 in HTML by Tejashwini
• 3,820 points
365 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, 2022 in HTML by Ashwini
• 5,430 points
499 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,520 points
1,274 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
15,577 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
23,205 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
3,268 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, 2022 in HTML by Deepak
• 980 points
3,026 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, 2022 in HTML by Deepak
• 980 points
689 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