How to Filter an HTML Table Using JavaScript (Search on the HTML Table)
Here is a solution to quickly filter an HTML table using JavaScript. Sometimes you have to show a large number of HTML table records and you have to quickly search the record by type in the search box. Today we share pure JavaScript code to filter table records easily.
JavaScript is a very powerful scripting language to execute on client-side. Through the JavaScript, we can find and filter record. Today session you will learn to create filter option for the HTML table using JavaScript. You can search by any of the columns just only single search box. Moreover, this JavaScript written code is effectively fewer lines and it will not affect any other functionality.
Quickly Search/Filter a HTML Table Using JavaScript
Here are one HTML Table element and one input text field for searching. Also, we used Bootstrap 4 to create a page layout. In the table element, we added some sample data. You can search by customer id, name, email, postal code, and country.
HTML table simply made with <tr>, <td> based. In this table, we added one class customers-list that will mapping with a search field. You can see we added attribute data-table="customers-list" to filter on customers-list class table. Now let’s move on JavaScript, here we create one variable called "search_input". Next step to initialize the JavaScript function, when page load completed (in our code readystatechange event). When any text typed in the search field, JavaScript will detect and find into table row using forEach loop. Thus we can archive this table filter functionality with lightweight code.
Here, we created one HTML file. Which is hold HTML, CSS, and JavaScript code. However, you can create separate files.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>JavaScript Table Filter Search</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
h3 span {
font-size: 22px;
}
h3 input.search-input {
width: 300px;
margin-left: auto;
float: right
}
.mt32 {
margin-top: 32px;
}
</style>
</head>
<body class="mt32">
<div class="container">
<h3>
<span>JavaScript Filter Table Data</span>
<input type="search" placeholder="Search..." class="form-control search-input" data-table="customers-list"/>
</h3>
<table class="table table-striped mt32 customers-list">
<thead>
<tr>
<th>Customer ID</th>
<th>Name</th>
<th>Email</th>
<th>Postal Code</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ana Trujillo</td>
<td>[email protected]</td>
<td>050214</td>
<td>Germany</td>
</tr>
<tr>
<td>2</td>
<td>Antonio Moreno</td>
<td>[email protected]</td>
<td>12209</td>
<td>Mexico</td>
</tr>
<tr>
<td>3</td>
<td>Maria Anders</td>
<td>[email protected]</td>
<td>05021</td>
<td>Germany</td>
</tr>
<tr>
<td>4</td>
<td>Thomas Hardy</td>
<td>[email protected]</td>
<td>WA1 1DP</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>5</td>
<td>Christina Berglund</td>
<td>[email protected]</td>
<td>S-958 22</td>
<td>Sweden</td>
</tr>
<tr>
<td>6</td>
<td>Davolio Nancy</td>
<td>[email protected]</td>
<td>810025</td>
<td>India</td>
</tr>
<tr>
<td>7</td>
<td>Fuller Andrew</td>
<td>[email protected]</td>
<td>W23 458</td>
<td>United State</td>
</tr>
<tr>
<td>8</td>
<td>Leverling Janet</td>
<td>[email protected]</td>
<td>T5A 0B5</td>
<td>Canada</td>
</tr>
</tbody>
</table>
</div>
<script>
(function(document) {
'use strict';
var TableFilter = (function(myArray) {
var search_input;
function _onInputSearch(e) {
search_input = e.target;
var tables = document.getElementsByClassName(search_input.getAttribute('data-table'));
myArray.forEach.call(tables, function(table) {
myArray.forEach.call(table.tBodies, function(tbody) {
myArray.forEach.call(tbody.rows, function(row) {
var text_content = row.textContent.toLowerCase();
var search_val = search_input.value.toLowerCase();
row.style.display = text_content.indexOf(search_val) > -1 ? '' : 'none';
});
});
});
}
return {
init: function() {
var inputs = document.getElementsByClassName('search-input');
myArray.forEach.call(inputs, function(input) {
input.oninput = _onInputSearch;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
TableFilter.init();
}
});
})(document);
</script>
</body>
</html>Following are demo and source code to filter an HTML table using JavaScript.
Are you struggling with assignment help in Javascript programming?
If so, you’re not alone. Javascript is an incredibly popular and versatile language, but it can also be tricky to learn. Fortunately, there are plenty of resources available to help you with your assignmens. One option is to use online tutorials and courses. These can often be found for free, and they provide a great foundation for learning Javascript. Tutorials will teach you the basics of assignment help in Javascript programming, as well as more advanced concepts. Another option is to ask for the help of an expert. Many professionals offer assignment help in Javascript programming at a reasonable cost. A qualified expert can provide personalized guidance and advice tailored to your individual needs. Finally, some assignment help can be provided by a community of other Javascript programmers. Sites such as Stack Overflow are full of helpful people willing to share their knowledge and experience with others. This is an invaluable resource for assignment help, as it allows you to tap into collective wisdom.
We hope you have found this article helpful. Let us know your questions or feedback if any through the comment section in below. You can subscribe our newsletter and get notified when we publish new WordPress articles for free. Moreover, you can explore here other interesting articles.
If you like our article, please consider buying a coffee for us.
Thanks for your support!
Buy me a coffee!
Hi there,
This is great!
I was wondering, do you know any chance how to have the table not show on load and when we clear the search in the input it will also clear? Thanks!!
Hi Michelle,
Yes, when input is empty you can hide table.
Please This is wonderful script, please help to add hide table when search is empty and also please help to add button
Nice but It doesn’t works on blogger template. Can We Expect to get same filter table code which works on Blogger Blog.
How to copy table items in plain text?
Sometimes copying text from the table and directly pasting in password boxes on other websites is not working until we paste the text from table somewhere else and then copy again from the new place.
Very nice filter indeed.
+1 to the question on how to hide the table on load while showing results when using the input field. I’ve tried
row.style.display = text_content.indexOf(search_val) > -1 ? ‘none’ : ”;
instead of
row.style.display = text_content.indexOf(search_val) > -1 ? ” : ‘none’;
but without luck.
worked well.
Thanks
Thanks !
Very well done!!!!
Is there an easy fix to also highlight the search hits, or is this a bigger task?
BR
Perfectly done, thanks a lot !