JavaScript Table Filter or Search | How to add Filter In HTML CSS Table

JavaScript Table Filter or Search | How to add Filter In HTML CSS Table

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

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.

You May Also Like:

  • JavaScript Portfolio Filter
  • Multi Step Form
  • Find Text & Highlight
  • Animated Newsletter Signup Form

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>[email protected]</td>
        <td>0123456789</td>
        <td>01</td>
        </tr>
        <tr>
        <td>Alen Fox</td>
        <td>[email protected]</td>
        <td>0155456789</td>
        <td>02</td>
        </tr>
        <tr>
        <td>Rakesh Sharma</td>
        <td>[email protected]</td>
        <td>6754328901</td>
        <td>03</td>
        </tr>
        <tr>
        <td>Bunty Singh</td>
        <td>[email protected]</td>
        <td>5678241598</td>
        <td>04</td>
        </tr>
        <tr>
        <td>Sushant Rajput</td>
        <td>[email protected]</td>
        <td>675457801</td>
        <td>05</td>
        </tr>
        <tr>
        <td>Sunny Sharma</td>
        <td>[email protected]</td>
        <td>675123451</td>
        <td>06</td>
        </tr>
        <tr>
        <td>Saurav Gupta</td>
        <td>[email protected]</td>
        <td>61234801</td>
        <td>07</td>
        </tr>
        <tr>
        <td>Appu Khote</td>
        <td>[email protected]</td>
        <td>67894561</td>
        <td>08</td>
        </tr>
        <tr>
        <td>Sandeep Arya</td>
        <td>[email protected]</td>
        <td>741852963</td>
        <td>09</td>
        </tr>
        <tr>
        <td>Vijay Mehra</td>
        <td>[email protected]</td>
        <td>456851982</td>
        <td>10</td>
        </tr>
        </tbody>
    </table>
 
</section>
 
    <script  src="function.js"></script>
 
</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;
}

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);

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. If you liked this post, share it with all of your programming buddies!

This post was originally published here

html html5 css css3 javascript tableau web-development

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Introduction To HTML & CSS: Web Development For Beginners

Introduction To HTML & CSS: Web Development For Beginners - Complete HTML & CSS web developer bootcamp. Learn & practice website design using HTML5 & CSS3 web development resources

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch, you'll learn the fundamentals of HTML5 & CSS3 programming. Tune in to learn concepts about web pages, CSS3 styles and HTML5 features.

The Ultimate Guide to Web Development with HTML and CSS

The Ultimate Guide to Web Development with HTML and CSS. Learn Web Development by creating a Blog with HTML and CSS. Make a web applications using HTML5 and CSS3. Create a blog from Scratch.

Develop this one fundamental skill if you want to become a successful developer

Throughout my career, a multitude of people have asked me&nbsp;<em>what does it take to become a successful developer?</em>