Question

表格过滤器“未找到”消息（HTML JS）

2021-01-15

504

javascript html filtering

如果筛选完成后，列表中没有任何值与输入值匹配，则尝试显示“未找到”文本。我使用了不同的方法，但都没有用，这是我的代码。提前谢谢您。

<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 = "none"。之后，当您在输入中键入内容时，此文本会立即显示。

Answer 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>