I’m trying to hide the whole div(where there’s a table inside) when the result from filtering/searching thru the table is empty.
So far, I have this:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } .mytable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; } .mytable th, .mytable td { text-align: left; padding: 12px; } .mytable tr { border-bottom: 1px solid #ddd; } .mytable tr.header, .mytable tr:hover { background-color: #f1f1f1; } </style> </head> <body> <h2>My Customers</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <div id="myTable1div"> <table id="myTable" class="mytable" data-name="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>Laughing Bacchus Winecellars</td> <td>Canada</td> </tr> </table> </div> <br><br> <div id="myTable1div"> <table id="myTable" class="mytable" data-name="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> </table> </div> <script> function myFunction() { var input, filter, table, tr, td, i,alltables; alltables = document.querySelectorAll("table[data-name=mytable]"); input = document.getElementById("myInput"); filter = input.value.toUpperCase(); alltables.forEach(function(table){ tr = table.getElementsByTagName("tr"); 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> <! ––hide div that doesnt have any data––> <script> $(function(){ var hide = true; $('#myTable td').each(function(){ var td_content = $(this).text(); if(td_content!=""){ hide = false; } }) if(hide){ $('#myTable1div').hide(); } }) </script> </body> </html>
As you can see, although the table is properly searched, the div and the table that has no value in its <td>
is still showing.
How can I hide the whole div if the table’s <td>
is empty while searching it?
Advertisement
Answer
Your first problem is that you had several elements with the same ID, e.g. <div id="myTable1div">
. I had to give them each a separate ID.
I created a helper function, hideDivs()
, which counts the number of rows which are set to display: none
, and if there is just one of them (i.e. the header), then hide that corresponding <div>
.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } .mytable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; } .mytable th, .mytable td { text-align: left; padding: 12px; } .mytable tr { border-bottom: 1px solid #ddd; } .mytable tr.header, .mytable tr:hover { background-color: #f1f1f1; } </style> </head> <body> <h2>My Customers</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <div id="myTable1div"> <table id="myTable" class="mytable" data-name="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>Laughing Bacchus Winecellars</td> <td>Canada</td> </tr> </table> </div> <br><br> <div id="myTable2div"> <table id="myTable2" class="mytable" data-name="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> </table> </div> <script> function hideDivs() { ['#myTable1div', '#myTable2div'].forEach(function (id) { // From https://stackoverflow.com/a/5325109/378779 if ($(id + ' tr:not([style*="display: none"])').length == 1) { $(id).hide(); } else { $(id).show(); } }) } function myFunction() { var input, filter, table, tr, td, i, alltables; alltables = document.querySelectorAll("table[data-name=mytable]"); input = document.getElementById("myInput"); filter = input.value.toUpperCase(); alltables.forEach(function (table) { tr = table.getElementsByTagName("tr"); 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"; } } } }); hideDivs(); } // hide div that doesn't have any data hideDivs(); </script> </body> </html>