I am trying to right a short explanation for this code that i have involved in my website to search the first column in a table. Can anyone help me with this? I am unsure if this is against the rules for stackoverflow, but giving it a shot. (the code works fine)
function tableSearch(){
let input, filter, table, tr, td, h, txtValue;
//Initializing Var
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = document.getElementsByTagName("tr");
for(let h = 0; h < tr.length; h++){
td = tr[h].getElementsByTagName("td")[0];
if(td){
txtValue = td.textContent || td.innerText;
if(txtValue.toUpperCase().indexOf(filter) > -1){
tr[h].style.display = "";
}
else {
tr[h].style.display = "none";
}
}
}
}function tableSearch(){
let input, filter, table, tr, td, h, txtValue;
//Initializing Var
input = document.getElementById("myInput"); //find input element
filter = input.value.toUpperCase(); //the search value in user's search input
table = document.getElementById("myTable"); //don't see anywhere using this variable
tr = document.getElementsByTagName("tr"); //get all `tr` (maybe from your table?)
//loop through all `tr`
for(let h = 0; h < tr.length; h++){
//get only first `td` from the current `tr` (`tr` is based on index)
td = tr[h].getElementsByTagName("td")[0];
//if found the first `td`
if(td){
//get the first `td` content
txtValue = td.textContent || td.innerText;
//if the first `td` content matches with your search input
//show the entire current `tr`
if(txtValue.toUpperCase().indexOf(filter) > -1){
tr[h].style.display = "";
}
//if the first `td` content does not with your search input
//hide the entire current `tr`
else {
tr[h].style.display = "none";
}
}
}
}
One side note here that toUpperCase() on search input value and td content is to ignore case sensitive