Why is my event listener not behaving correctly, as my function do, sharing the same functionality?
I need to hide the row in a table, based on the input in the search bar.
The below is the functionality I have tried.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_table
I want this to be implemented in Event listener, instead of function.
<!DOCTYPE html>
<html>
<head>
<title>Filter Table</title>
<style>
body{
font-family: 'Bebas Neue', cursive;
font-family: 'M PLUS 2', sans-serif;
}
*{
box-sizing: border-box;
}
input[type = "text"]{
border: 1px solid black;
width: 96%;
margin: 0 50px;
padding: 10px 35px 10px 35px;
font-size: 15px;
font-family: 'Bebas Neue', cursive;
font-family: 'M PLUS 2', sans-serif;
background-image: url('https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-512.png');
background-repeat: no-repeat;
background-size: 30px;
background-position: 3px 6px;
}
#myTable{
width: 96%;
border: 1px solid rgb(197, 194, 194);
margin: 10px 50px;
border-collapse: collapse;
font-size: 20px;
}
#myTable td,th{
text-align: left;
padding: 20px;
}
tr{
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover{
background-color: rgb(241, 241, 241);
}
</style>
</head>
<body>
<h2><b>My Customers</b></h2>
<input type="text" placeholder="Search for names.." onkeyup="myFunction()" id="myInput" >
<table id="myTable">
<tr class="header">
<th style="width: 60%;"><b>Name</b></th>
<th style="width: 40%;"><b>Country</b></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>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>
</body>
<script>
// Function to filter the table, based on search
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
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";
}
}
}
}
// Event Listener, to filter the table, based on search
// var input = document.getElementById('myInput');
// input.addEventListener('click', function(){
// var myTable = document.getElementById('myTable');
// var row = myTable.getElementsByTagName('tr');
// var value = input.value;
// var ex_val = value.toUpperCase();
// for(var i=1;i < row.length;i++){
// var content = row[i].getElementsByTagName('td')[0];
// var ex_con = content.textContent.toUpperCase();
// if ( ex_con.indexOf(ex_val) > -1){
// row[i].style.display = '';
// }
// else{
// row[i].style.display = 'none';
// }
// }
// })
</script>
</html>