表格过滤器“未找到”消息 (HTML JS)答案

【问题标题】：Table filter "Not Found" message (HTML JS)表格过滤器“未找到”消息 (HTML JS)
【发布时间】：2021-04-20 20:52:08
【问题描述】：

如果在过滤完成后没有任何列表值与输入值匹配，我将尝试显示“未找到”文本。我使用了不同的方法但不起作用，这是我的代码。提前谢谢你。

<body>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<table id="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>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
</table>

<script>
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;

  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>
</body>

我使用的方法是在 html 上添加 div 文本，分类为“text”，样式为“display: none”，之后我在 js 中的“else”下面添加了这段代码：document.getElementById("text" ).style.display = "无"。当您在输入中输入内容时，此文本会立即显示出来。

【问题讨论】：

标签： javascript html filtering

【解决方案1】：

这可能是您需要的 :) 如果您使用 JQuery 或 CSS 或获得一些 MIT 许可的网格可能看起来更好，并且您将拥有此功能 :) 您可以查看此 http://www.jquery-bootgrid.com/Examples

<body>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<table id="myTable">
  <tr class="header ignore-search">
    <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>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr id="not-found-row" class="ignore-search" style="display:none">
    <td>Not found</td>
  </tr>
</table>

<script>
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;

  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
  
  var resultsNotFound = true;
  document.querySelectorAll("table tr:not(.ignore-search)").forEach(tr => {
    var isHidden = tr.offsetParent === null
    if(!isHidden) {
    resultsNotFound = false;
    }
  })
  
  var notFoundLabel = document.getElementById('not-found-row');
  if(resultsNotFound) {
    notFoundLabel.style.display = "";
  } else {
    notFoundLabel.style.display = "none";
  }
  
}
</script>
</body>

【讨论】：