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
|
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
|
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
|
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.
