Table 过滤 "Not Found" 消息 (HTML JS)

Question

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

<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 文本，分类为“文本”，样式为“显示：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>

Table 过滤 "Not Found" 消息 (HTML JS)

Table filter "Not Found" message (HTML JS)

html

javascript

filtering