如何隱藏表格，直到在搜索中輸入過濾/輸入

Question

我是Web開發的新手，但是很快就趕上了。 我正在為我的公司開發一個Wiki頁面，並且已經構建了一個過濾器表，但是我想隱藏該表，直到在用戶輸入其搜索文本時應用過濾器功能為止。 因此，這種方式僅顯示文本輸入框，然后在他們輸入搜索內容時，表格結果將顯示出來。

我正在使用以下Javascript進行過濾：

  function ContactsearchFX() {
  var input, filter, table, tr, td, i;
  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) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";

      }
    }
  }
}

在基本搜索表上，帶有以下html代碼：

<input type="text" id="myInput"            onkeyup="ContactsearchFX()" placeholder="Search for           names..">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Number</th>
  </tr>
   <tr>
    <td>contact</td>
    <td>number</td>
  </tr>
     <tr>
    <td>contact</td>
    <td>number</td>
  </tr>
  <tr>
    <td>contact</td>
    <td>number</td>
  </tr>

....等等。

Answer 1

您可以為表格提供隱藏樣式的默認樣式，以便在渲染時隱藏表格的默認狀態。

<input type="text" id="myInput" onkeyup="ContactsearchFX()" placeholder="Search for names..">

<table id="myTable" style="display:none;">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Number</th>
  </tr>
   <tr>
    <td>contact</td>
    <td>number</td>
  </tr>
     <tr>
    <td>contact</td>
    <td>number</td>
  </tr>
  <tr>
    <td>contact</td>
    <td>number</td>
  </tr>

Answer 2

我建議在頁面加載時運行ContactsearchFX函數：

document.addEventListener('DOMContentLoaded', ContactsearchFX);

...，並且在顯示行的條件下要求filter不是空字符串。

這具有一個特殊的優點：某些瀏覽器會記住在輸入框中輸入的最后一個文本，並在頁面加載時自動再次填充該文本。 使用此解決方案，將立即過濾相應的表行。

為了獲得更好的響應效果，我將刪除onkeyup="ContactsearchFX()" HTML屬性，而添加以下JavaScript：

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('myInput').addEventListener('input', ContactsearchFX);
});

還可以考慮使用rows和cells集合而不是getElementsByTagName

可能您希望將標題行保留在過濾過程之外，因此循環應從1開始而不是0。

 document.addEventListener('DOMContentLoaded', function () { ContactsearchFX(); document.getElementById('myInput').addEventListener('input', ContactsearchFX); }); function ContactsearchFX() { var input, filter, table, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.rows; for (i = 1; i < tr.length; i++) { td = tr[i].cells[0]; if (td) { tr[i].style.display = filter && td.textContent.toUpperCase().indexOf(filter) > -1 ? "" : "none"; } } } 

 <input type="text" id="myInput" placeholder="Search for names.."> <table id="myTable"> <tr class="header"> <th style="width:60%;">Name</th> <th style="width:40%;">Number</th> </tr> <tr> <td>test 1</td> <td>number</td> </tr> <tr> <td>test 2</td> <td>number</td> </tr> <tr> <td>test 3</td> <td>number</td> </tr> </table> 

Answer 3

 window.onload = function() { var rows = document.querySelectorAll('tr:not(.header)'); for (var i = 0; i < rows.length; i++) { rows[i].style.display = 'none'; } } function ContactsearchFX() { var input, filter, table, tr, td, i; 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) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } var rows = document.querySelectorAll('tr:not(.header)'); if (input.value.length == 0) { for (var i = 0; i < rows.length; i++) { rows[i].style.display = 'none'; } } } 

 <input type="text" id="myInput" onkeyup="ContactsearchFX()" placeholder="Search for names.."> <table id="myTable"> <tr class="header"> <th style="width:60%;">Name</th> <th style="width:40%;">Number</th> </tr> <tr> <td>test 1</td> <td>number</td> </tr> <tr> <td>test 2</td> <td>number</td> </tr> <tr> <td>test 3</td> <td>number</td> </tr> 

這似乎可以解決問題！ 在加載窗口時，它循環遍歷所有現在具有標題類的表行。 因此您的標題始終可見。

然后，就像您的代碼最初所做的那樣，它會遍歷表並篩選出匹配的表。

此后，我剛剛添加了另一個循環，然后將行設置回顯示：如果輸入框中沒有內容，則不顯示任何內容。

希望這就是您想要的。