How to hide div that has a table inside if the table's <td> is empty when filtering using-CodePudding

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"  data-name="mytable">
  <tr >
    <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"  data-name="mytable">
  <tr >
    <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?

CodePudding user response：

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"  data-name="mytable">
            <tr >
                <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"  data-name="mytable">
            <tr >
                <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>

CodePudding user response：

Try checking if the element is rendered in the DOM before hiding it. You can do this by if ($('#myTable1div').is(':visible'))