Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Javascript Project to Sort & Filter HTML5 Table Rows & Columns Data in Browser

Posted on November 18, 2022

 

 

Welcome folks today in this blog post we will be sorting and filtering html5 table data in browser using javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
</table>

 

 

And now in the above code we are declaring the html5 table where we have two rows and then inside that we have the td tags in which we have declared the data as shown below

 

 

 

 

 

Adding the Input Field

 

 

1
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

 

 

Now as you can see in the above code we are having the input field where we can enter the search input string for finding or sorting the html5 table rows and columns.

 

 

 

 

As you can see we have attached the onkeyup event handler function. When we presses the keyboard up this event will be fired so we need to write the javascript code to search and filter the table rows and columns.

 

 

Styling the Html5 Table

 

 

Now we will be styling the html5 table using the css properties as shown below

 

 

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  #myTable {
  border-collapse: collapse; /* Collapse borders */
  width: 100%; /* Full-width */
  border: 1px solid #ddd; /* Add a grey border */
  font-size: 18px; /* Increase font-size */
}
 
#myTable th, #myTable td {
  text-align: left; /* Left-align text */
  padding: 12px; /* Add padding */
}
 
#myTable tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

 

 

As you can see in the above code we are attaching the css properties to the table rows and columns

 

 

Adding the Javascript Code to Search & Filter Data

 

 

Now we will be adding the javascript code to search and filter the rows and columns. For this we will be writing the javascript code

 

 

JavaScript
1
2
3
4
5
6
// Declare variables
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");

 

 

As you can see we have declared the variables where we are getting the reference of the DOM Elements. We are getting the references using the ID’s and then we are getting the elements from the tag names. And also we are getting the reference of the input element and also getting the value and then we are converting the input value to uppercase.

 

And now we will be looping through all the rows and columns to search for the input in table rows and columns as shown below

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
// Loop through all table rows, and hide those who don't match the search query
    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 = "block";
        } else {
          tr[i].style.display = "none";
        }
      }
    }

 

 

As you can see in the above code we are having this for loop. And depending upon the value given inside the input field we are showing or hiding the rows and columns.

 

 

Recent Posts

  • Javascript Example to Validate Multi-Step HTML5 Form With Custom Error Messages in Browser
  • Javascript Wavesurfer.js Example to Generate Audio Waveform of Selected Audio File in Browser
  • Javascript Fabric.js Example to Export Drawing Canvas to Image & PDF Document in Browser
  • Python 3 Flask-WTF Example to Implement Form Validation and Show Custom Error Messages in Browser
  • Python 3 Flask Jinja2 Template Project to Implement HTML5 Form Validation & Show Custom Error Messages in Browser
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme