Remove entire table when there is no input in searchbox?-CodePudding

I have been twisting my head around on this and I can't seem to fix it.

I have not coded much, but wanting to learn. However, I am trying to make a table in which when there is no input the entire table vanishes.

As of now I have managed to get it so that it starts as vanished, and that when information is inserted into the search box the non-relevant lines dissapear. However, when all text in the search box is removed the entire table is showing. I want the table to stay hidden when there is no text that matches.

Would love to get any feedback on what I am doing wrong here.

  
    function performSearch() {

  // Declare search string 
  var filter = searchBox.value.toUpperCase();

  // Loop through first tbody's rows
  for (var rowI = 0; rowI < trs.length; rowI  ) {

    // define the row's cells
    var tds = trs[rowI].getElementsByTagName("td");
      

    // hide the row
    trs[rowI].style.display = "none";

    // loop through row cells
    for (var cellI = 0; cellI < tds.length; cellI  ) {

      // if there's a match
      if (tds[cellI].innerHTML.toUpperCase().indexOf(filter) > -1)
        {

        // show the row
            myTable.style.display = "table";
        trs[rowI].style.display = "";
       
        // skip to the next row
        continue;
              
            
          

      }
        
        
    }
  }
        
}      
        

// declare elements
const searchBox = document.getElementById('searchBox');
const table = document.getElementById("myTable");
const trs = table.tBodies[0].getElementsByTagName("tr");

// add event listener to search box
searchBox.addEventListener('keyup', performSearch);

  * {
  box-sizing: border-box;
}

#searchBox {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 30%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
position: relative;
 top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);

}

#myTable {
  border-collapse: collapse;
  width: 80%;
  border: 1px solid #ddd;
  font-size: 18px;
    position: relative;
left: 10%;
    display: none;
}

#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;
}

    
    #Overskrift {
    width: 100%;
 text-align-last: center;
  font-size: 40px;    
}

<input  type="text" id="searchBox" placeholder="Search ..." onkeyup="searchTableColumns()">


<table id="myTable">
    <thead>
  <tr >
      <th onclick="sortTable(0)" style="width:35%;">Fagnavn</th>
    <th onclick="sortTable(1)" style="width:21%;">LK20</th>
    <th onclick="sortTable(2)" style="width:21%;">LK06</th>
       <th onclick="sortTable(3)" style="width:21%;">R94</th>
  </tr>
        </thead>
    <tbody>
  <tr>
       <td>Pika</td>
    <td>Chu</td>
    <td>Poke</td>
 <td>Mon</td>
  </tr>
  <tr>
       <td>Temporary</td>
    <td>Text</td>
    <td>Fields</td>
       <td>Here</td>
  </tr>

    </tbody>
</table>

CodePudding user response：

There is a simple solution for this. Just add a check to the end your performSearch function:

  if (searchBox.value === ''){
    table.style.display='none';
  }
  else {
    table.style.display='table';
  }

You can also check it here: https://codepen.io/serazoltan/pen/dyZRprb