Skip to content
pakainfo

Pakainfo

Web Development & Good Online education

  • Home
  • Blog
  • Categories
  • Tools
  • Full Form
  • Guest Post
    • Guest Posting Service
  • Advertise
  • About
  • Contact Us

How to filter a html table using simple javascript?

December 28, 2020 Pakainfo Tech, JavaScript, Programming Leave a comment

Today, We want to share with you filter html table using javascript.In this post we will show you excel like filter in html table, hear for bootstrap table filter dropdown we will give you demo and example for implement.In this post, we will learn about Simple Jquery Search Filter Example with an example.

How to Filter an HTML Table Using JavaScript (Search on the HTML Table)?

Contents

  • How to Filter an HTML Table Using JavaScript (Search on the HTML Table)?
    • multiple filter html table using javascript
    • Related posts

Example 1: How TO – Filter/Search Table?
index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#liveSearchDataTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#liveSearchDataTable th, #liveSearchDataTable td {
  text-align: left;
  padding: 12px;
}

#liveSearchDataTable tr {
  border-bottom: 1px solid #ddd;
}

#liveSearchDataTable tr.header, #liveSearchDataTable tr:hover {
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>My Employees</h2>

<input type="text" id="myInput" onkeyup="fetchDataResults()" placeholder="Search for names.." title="Type in a Employee Name">

<table id="liveSearchDataTable">
  <tr class="header">
    <th style="width:60%;">Employee Name</th>
    <th style="width:40%;">City</th>
  </tr>
  <tr>
    <td>Dinesh Vasoya</td>
    <td>Rajkot</td>
  </tr>
  <tr>
    <td>Ankita pipariya</td>
    <td>Surat</td>
  </tr>
  <tr>
    <td>Meera sidupura</td>
    <td>Ahemdabad</td>
  </tr>
  <tr>
    <td>Sejal Ramanai</td>
    <td>Bhavnagar</td>
  </tr>
  <tr>
    <td>Virat Kohali</td>
    <td>Jammnagar</td>
  </tr>
  <tr>
    <td>Sumitra Gondaliya</td>
    <td>Bhavnagar</td>
  </tr>
  <tr>
    <td>Vijay Bhanderi</td>
    <td>Ahemdabad</td>
  </tr>
  <tr>
    <td>Rekha Tadapda</td>
    <td>Rajkot</td>
  </tr>
</table>

<script>
function fetchDataResults() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("liveSearchDataTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>

</body>
</html>

multiple filter html table using javascript

index.html

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>JavaScript Table Filter Search - www.pakainfo.com</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>virat Kohali</td>
                    <td>[email protected]</td>
                    <td>985698</td>
                    <td>Rajestan</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Rohit Sharma</td>
                    <td>[email protected]</td>
                    <td>78548</td>
                    <td>Junagdha</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Sachin Tendulkar</td>
                    <td>[email protected]</td>
                    <td>59868</td>
                    <td>Baroda</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Malri Shivalik</td>
                    <td>[email protected]</td>
                    <td>WA1 1DP</td>
                    <td>Ahemdabad</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Chaggan Dhameliya</td>
                    <td>[email protected]</td>
                    <td>S-985 55</td>
                    <td>Surat</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Sejal Ramani</td>
                    <td>[email protected]</td>
                    <td>985698</td>
                    <td>Kalavad</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>Fuller Andrew</td>
                    <td>[email protected]</td>
                    <td>E89 692</td>
                    <td>Bhavanagar</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>4cgandhi free</td>
                    <td>[email protected]</td>
                    <td>G7F 0K8</td>
                    <td>Rajkot</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>

I hope you get an idea about jquery filter table rows by column value.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Related posts:

  1. how to add edit and delete rows of a html table with javascript?
  2. how to get selected row value in html table using javascript?
  3. Simple Jquery Search Filter Example
  4. Simple Model Popup Box using HTML CSS and JavaScript
  5. nested table in html – How to an Html Table inside another Table?
  6. Filter (Search) Table using Angular Example
  7. simple testimonial slider bootstrap using html javascript
  8. how to get selected row value in html table using jquery?
  9. Table Columns Sorting with OrderBy Filter using Angular Example
Also Read This 👉   jQuery Validation Email Mobile password Regular Expression
bootstrap table filter dropdownbootstrap table filter examplesexcel like filter in html tablefilter html table using jqueryhtml table with drop down filterjavascript filter table rows examplejquery filter table rows by column valuemultiple filter html table using javascript

Post navigation

Previous Post:Explain Polymorphism in python
Next Post:How to force HTTPS or WWW using the htaccess file?

Advertise With Us

Increase visibility and sales with advertising. Let us promote you online.
Click Here

Write For Us

We’re accepting well-written informative guest posts and this is a great opportunity to collaborate.
Submit a guest post to [email protected]
Contact Us

Freelance web developer

Do you want to build a modern, lightweight, responsive website quickly?
Need a Website Or Web Application Contact : [email protected]
Note: Paid Service
Contact Me

Categories

3movierulz (64) Ajax (464) AngularJS (377) ASP.NET (61) Bio (109) Bollywood (108) Codeigniter (175) CSS (98) Earn Money (93) Education (63) Entertainment (130) fullform (87) Google Adsense (64) Highcharts (77) History (40) Hollywood (109) JavaScript (1359) Jobs (42) jQuery (1423) Laravel (1088) LifeStyle (53) movierulz4 (63) Mysql (1035) Mysqli (894) php (2133) Programming (2344) Python (99) Software (178) Software (90) Stories (98) tamilrockers (104) Tamilrockers kannada (64) Tamilrockers telugu (61) Tech (145) Technology (2414) Tips and Tricks (130) Tools (213) Top10 (502) Trading (93) Trending (75) VueJs (250) Web Technology (111) webtools (197) wordpress (166) World (341)

A To Z Full Forms

Access a complete full forms list with the meaning, definition, and example of the acronym or abbreviation.
Click Here
  • Home
  • About Us
  • Terms And Conditions
  • Write For Us
  • Advertise
  • Contact Us
  • Youtube Tag Extractor
  • Info Grepper
  • Guest Posting Sites
  • Increase Domain Authority
  • Social Media Marketing
  • Freelance web developer
  • Tools
Pakainfo 9-OLD, Ganesh Sco, Kothariya Ring Road, Chokadi, Rajkot - 360002 India
E-mail : [email protected]
Pakainfo

© 2023 Pakainfo. All rights reserved.

Top
Subscribe On YouTube : Download Source Code
We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype Guest Posting Sites