Home Web Development JavaScript JavaScript Table Filter or Search | Add Filter In HTML CSS Table

JavaScript Table Filter or Search | Add Filter In HTML CSS Table

July 15, 2019

20835

How we can add a search or filter option in an HTML Table using JavaScript? Solution: JavaScript Table Filter or Search, Add Filter In HTML CSS Table.

Previously I have shared a responsive table design, But how we can add a filter option in the table. Maybe you have seen on some websites, where you can search for a specific condition in the table. Like if ever you have visited any websites backend dashboard, then you probably know that we can be filtering out for any user by putting some conditions.

Today you will learn to create filter option for the HTML table using JavaScript. Using this program you can search for specific tables content by searching name, email, id, etc. This is a short & pure JavaScript program for table filter, you can use this on any kind of table on any place. You can use this on your next project, I know using jQuery we can create advanced filtering functions. But it is for showing how can we create the feature using pure JS.

So, Today I am sharing JavaScript Table Filter or Search for HTML Tables. Basically, This program is for Add FIlter In HTML & CSS Based Table. I have used Bootstrap for creating the table’s layout, & used CSS little bit for styling. In this table I have added some data, you add more according to your need. Or another option is to use the JS code & put it your own table.

If you are thinking now how this Filter Table actually is, Then see the preview given below.

Preview Of Add Filter In HTML CSS Tables

See this video preview to getting an idea of how this filter program looks like.

Now you can see this visually. If you like this, then get the source code of its.

JavaScript Table Filter or Search Source Code

Before sharing source code, let’s talk about this. As you know this is an HTML table, I have used Bootstrap & CSS to create the layout. This is a simple <td> and <tr> based table. In the filter fields, I have used HTML data-* (get info) attribute search & sorting them. In the CSS file, styled some elements like heading, table. As you can see in the preview the tables are colored in odd-even order, For creating that I used CSS :nth-of-type() property.

In the JavaScript section, I create a variable named var TableFilter and put all the functions inside it. In HTML we stored custom data using Data-* element, Now JS fetches it using .getAttribute method. Now javascript find the filtering text using a function called function _filter(row) If any data matches the input then its display that.

I know to explain the JS code in writing is taught, You will automatically understand after getting the codes. If you have some knowledge of JavaScript then you will definitely understand.

For creating this program you have to create 3 files. First for HTML, second for CSS, & third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Light Javascript Table Filter</title>
  
  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  
  
</head>

<body>

  <section class="container">

	<h1>Table Filter JavaScript</h2>

	<input type="search" class="light-table-filter" data-table="table-info" placeholder="Filter/Search">

	<table class="table-info table">
		<thead>
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Phone No</th>
				<th>ID</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>John Doe</td>
				<td>john.doe@gmail.com</td>
				<td>0123456789</td>
				<td>01</td>
			</tr>
			<tr>
				<td>Alen Fox</td>
				<td>Alen.fox@gmail.com</td>
				<td>0155456789</td>
				<td>02</td>
			</tr>
			<tr>
				<td>Rakesh Sharma</td>
				<td>rakesh.sharma@gmail.com</td>
				<td>6754328901</td>
				<td>03</td>
			</tr>
			<tr>
				<td>Bunty Singh</td>
				<td>Bunty.singh@gmail.com</td>
				<td>5678241598</td>
				<td>04</td>
			</tr>
			<tr>
				<td>Sushant Rajput</td>
				<td>sushant.rajput@gmail.com</td>
				<td>675457801</td>
				<td>05</td>
			</tr>
			<tr>
				<td>Sunny Sharma</td>
				<td>sunnysharma@gmail.com</td>
				<td>675123451</td>
				<td>06</td>
			</tr>
			<tr>
				<td>Saurav Gupta</td>
				<td>saurav.gupta@gmail.com</td>
				<td>61234801</td>
				<td>07</td>
			</tr>
			<tr>
				<td>Appu Khote</td>
				<td>appu.khote@gmail.com</td>
				<td>67894561</td>
				<td>08</td>
			</tr>
			<tr>
				<td>Sandeep Arya</td>
				<td>sandeep.arya@gmail.com</td>
				<td>741852963</td>
				<td>09</td>
			</tr>
			<tr>
				<td>Vijay Mehra</td>
				<td>vijay.mehra@gmail.com</td>
				<td>456851982</td>
				<td>10</td>
			</tr>
		</tbody>
	</table>

</section>

    <script  src="function.js"></script>

</body>
</html>

100

101

102

<!DOCTYPE html>

<head>

<title>Light Javascript Table Filter</title>

</head>

<body>

<h1>Table Filter JavaScript</h2>

<thead>

<tr>

<th>Email</th>

<th>Phone No</th>

</tr>

</thead>

<tbody>

<tr>

<td>john.doe@gmail.com</td>

</tr>

<tr>

<td>Alen.fox@gmail.com</td>

</tr>

<tr>

<td>Rakesh Sharma</td>

<td>rakesh.sharma@gmail.com</td>

</tr>

<tr>

<td>Bunty Singh</td>

<td>Bunty.singh@gmail.com</td>

</tr>

<tr>

<td>Sushant Rajput</td>

<td>sushant.rajput@gmail.com</td>

</tr>

<tr>

<td>Sunny Sharma</td>

<td>sunnysharma@gmail.com</td>

</tr>

<tr>

<td>Saurav Gupta</td>

<td>saurav.gupta@gmail.com</td>

</tr>

<tr>

<td>Appu Khote</td>

<td>appu.khote@gmail.com</td>

</tr>

<tr>

<td>Sandeep Arya</td>

<td>sandeep.arya@gmail.com</td>

</tr>

<tr>

<td>Vijay Mehra</td>

<td>vijay.mehra@gmail.com</td>

</tr>

</tbody>

</table>

</section>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
body {
    margin-top: 150px;
    font-family: 'Lato', sans-serif;
}
input {
    width: 200px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid #212121;
    height: 40px;
}
table {
    margin-top: 30px;
}
tr:nth-of-type(even) {
    background: #ffd98b;
}
thead {
    background: #fbb016;
}

/** Code By Webdevtrick ( https://webdevtrick.com ) **/

body {

margin-top: 150px;

font-family: 'Lato', sans-serif;

}

input {

width: 200px;

border-radius: 5px;

text-align: center;

border: 1px solid #212121;

height: 40px;

}

table {

margin-top: 30px;

}

tr:nth-of-type(even) {

background: #ffd98b;

}

thead {

background: #fbb016;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
(function(document) {
	'use strict';

	var TableFilter = (function(Arr) {

		var _input;

		function _onInputEvent(e) {
			_input = e.target;
			var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
			Arr.forEach.call(tables, function(table) {
				Arr.forEach.call(table.tBodies, function(tbody) {
					Arr.forEach.call(tbody.rows, _filter);
				});
			});
		}

		function _filter(row) {
			var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
			row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
		}

		return {
			init: function() {
				var inputs = document.getElementsByClassName('light-table-filter');
				Arr.forEach.call(inputs, function(input) {
					input.oninput = _onInputEvent;
				});
			}
		};
	})(Array.prototype);

	document.addEventListener('readystatechange', function() {
		if (document.readyState === 'complete') {
			TableFilter.init();
		}
	});

})(document);

/* Code By Webdevtrick ( https://webdevtrick.com ) */

(function(document) {

'use strict';

var TableFilter = (function(Arr) {

var _input;

function _onInputEvent(e) {

_input = e.target;

var tables = document.getElementsByClassName(_input.getAttribute('data-table'));

Arr.forEach.call(tables, function(table) {

Arr.forEach.call(table.tBodies, function(tbody) {

Arr.forEach.call(tbody.rows, _filter);

});

}

function _filter(row) {

var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();

row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';

}

return {

init: function() {

var inputs = document.getElementsByClassName('light-table-filter');

Arr.forEach.call(inputs, function(input) {

input.oninput = _onInputEvent;

});

}

};

})(Array.prototype);

document.addEventListener('readystatechange', function() {

if (document.readyState === 'complete') {

TableFilter.init();

}

});

})(document);

That’s It. Now you have successfully created JavaScript Table Filter or Search. In other words, Add Filter In HTML CSS Table. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

7 COMMENTS

Yash Goel August 17, 2019 At 10:59 am

Hello, Can you help in making search engine like this without table. Means on a single page by the heading of the topic

Reply
- shaan August 17, 2019 At 1:07 pm
  
  sure
  
  Reply
  - Sumit Magar June 16, 2021 At 2:48 pm
    
    yes, I also want it. Same process but the table should not visible and there should be button with search when the clicked result will be visible
    
    Reply
Madjid Harun September 6, 2019 At 12:25 pm

May GOD bless you!

Reply
Shazia September 19, 2019 At 11:08 am

Hi Shaan, I have 3 tables in my website and each table is in different page, When i try to use this code. It’s checking all 3 table. How to make it just check current table in the current page.

Reply
Rudy Medina April 23, 2022 At 7:10 pm

this is amazing is there a way to lock the heading so that it doesnt filter also?

Reply
hanso April 5, 2023 At 8:56 pm

this is so good yet simple it helped me so much after hours of searching an trying thank you so much

Reply