leebond.ia Posted November 27, 2017 Share Posted November 27, 2017 (edited) Hey W3 Forum, I am currently building a page that includes a small data set about 400 rows under 3 columns. I currently am using this function to filter through the three columns based on a search result from an HTML box. I woulid like to add two things to this function, the first is an ability to filter from a drop down list that leaves the data unaffected when blank, and a small highlight functionality highlighting whatever the current input is. Could use an assist. <script Language="javascript"> function searchTable() { var input, filter, found, table, tr, td, i, j; 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"); for (j = 0; j < td.length; j++) { if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) { found = true; } } if (found) { tr[i].style.display = ""; found = false; } else { tr[i].style.display = "none"; } } } </script> Edited November 27, 2017 by leebond.ia Link to comment Share on other sites More sharing options...
dsonesuk Posted November 27, 2017 Share Posted November 27, 2017 You can add argument to function to identify if input, or select to give same result. With the select, you can identify if blank or not and filter or clear filter depending on value. The highlight IF related to td cell can be applied if found equals true when looping through each cell, IF tr is can be applied when found is true same as you have to show row. 1 Link to comment Share on other sites More sharing options...
leebond.ia Posted November 27, 2017 Author Share Posted November 27, 2017 Any chance you can refer me to the w3school article that would help me build this? Still very green when it comes to Jscript. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now