搜索框中没有输入时删除整个表格？答案

【问题标题】：Remove entire table when there is no input in searchbox?搜索框中没有输入时删除整个表格？
【发布时间】：2022-02-11 21:47:35
【问题描述】：

我一直在纠结这个问题，但我似乎无法解决它。

我编码不多，但想学习。但是，我正在尝试制作一个表格，当没有输入时，整个表格都会消失。

到目前为止，我已经设法让它消失了，并且当信息被插入到搜索框中时，不相关的行消失了。但是，当搜索框中的所有文本都被删除时，整个表格就会显示出来。当没有匹配的文本时，我希望表格保持隐藏状态。

希望得到任何关于我在这里做错了什么的反馈。

  
    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 class="form-control" type="text" id="searchBox" placeholder="Search ..." onkeyup="searchTableColumns()">


<table id="myTable">
    <thead>
  <tr class="header">
      <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>

【问题讨论】：

标签： javascript html css

【解决方案1】：

对此有一个简单的解决方案。只需在 performSearch 函数的末尾添加一个检查：

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

您也可以在这里查看： https://codepen.io/serazoltan/pen/dyZRprb

【讨论】：