How To Create Filter Table Using Javascript, Html, And Css

Step 1 Add HTML:

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

 

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

Step 2 Add CSS:

#myInput {

background-image: url(‘/css/searchicon.png’); /* Add a search icon to input */

background-position: 10px 12px; /* Position the search icon */

background-repeat: no-repeat; /* Do not repeat the icon image */

width: 100%; /* Full-width */

font-size: 16px; /* Increase font-size */

padding: 12px 20px 12px 40px; /* Add some padding */

border: 1px solid #ddd; /* Add a grey border */

margin-bottom: 12px; /* Add some space below the input */

}

 

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

}

#myTable tr.header, #myTable tr:hover {

/* Add a grey background color to the table header and on hover */

background-color: #f1f1f1;

}

Step 3 Add JavaScript:

<script>

function myFunction() {

// Declare variables

var input, filter, table, tr, td, i;

input = document.getElementById(“myInput”);

filter = input.value.toUpperCase();

table = document.getElementById(“myTable”);

tr = table.getElementsByTagName(“tr”);

// 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) {

if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {

tr[i].style.display = “”;

} else {

tr[i].style.display = “none”;

}

}

}

}

</script>

 

 

 


P.S. Thanks for reading to the end. If you found value in this, kindly recommend (by clicking the share buttons below) so other people can learn too!
Is there a Howto you'd love to learn? We'll be glad to create it for you, let us know in the comments. Cheers!

CONTACT US

We're always here. You can send us an email and we'll get back to you, asap.

Sending

© 2015 - 2018 Howtos.ng

or

Log in with your credentials

Forgot your details?