How can I hide my HTML table, when a search is finished?
Question
I am trying to let my HTML table load up hidden, and it only displays the "hits" that matches accordingly to the user's search, and whenever a search is not happening, the table should go back to being hidden.
<html>
<table id="dvExcel"></table>
</html>
<style>
#dvExcel{
display: none;
}
</style>
<script>
function myFunction() {
//this is the search function
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
and store
table = document.getElementById("dvExcel");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td ) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
table.style.display = "block";
tr[i].style.display = "";
}else {
tr[i].style.display = "none";
}
}
}
}
</script>
My HTML table loads hidden, and everytime I search it displays the hits, but the table will not go back to being hidden when I remove the text in the search box. Instead it displays the whole table.
2 answers
solution1
0 2019-06-05 18:59:23
You set the table to block but never set it back to none. Using your existing for loop, add a check to see if any hits were found or not. If none were found hide the whole table, rather than just the rows.
var foundHit = false; // Add this
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td ) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
table.style.display = "block";
tr[i].style.display = "";
foundHit = true; // Add this
}else {
tr[i].style.display = "none";
}
}
}
if (!foundHit) table.style.display = "none"; // Add this
solution2
0 2019-06-05 19:04:07
You forgot to set the display style of the table to none when nothing is found:
table.style.display = "none";
Here is the complete working code:
var theButton = document.getElementById("b1"); theButton.onclick = myFunction1; theButton = document.getElementById("b2"); theButton.onclick = myFunction2; function myFunction1() { myFunction ('something'); } function myFunction2() { myFunction (); } function myFunction (myInput) { var table = document.getElementById("dvExcel"); var tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td ) { if (myInput) { table.style.display = "block"; tr[i].style.display = ""; } else { table.style.display = "none"; tr[i].style.display = "none"; } } } }
#dvExcel { display: none; }
<h3> table show/hide test </h3> <table id="dvExcel"><tr><td>This is the table. It is visible now.</td></tr></table> <button id="b1"> find something </button> <button id="b2"> don't find anything </button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.