如何在搜索中输入过滤/输入之前隐藏表格答案

【问题标题】：How can I hide a table until filtered/input entered in search如何在搜索中输入过滤/输入之前隐藏表格
【发布时间】：2017-11-10 17:52:51
【问题描述】：

我是网络开发的新手，但很快就赶上了。我正在为我的公司开发一个 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>

....等等。

【问题讨论】：

标签： javascript html search filter html-table

【解决方案1】：

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>

这似乎可以解决问题！在加载窗口时，它会遍历所有现在具有标题类的表行。所以你的标题，总是可见的。

然后就像您的代码最初所做的那样，它会遍历表格并过滤掉匹配的那些。

在此之后，我只是添加了另一个循环，然后将行设置回显示：如果输入框中没有任何内容，则为无。

希望这就是您想要的。

【讨论】：

我喜欢这个想法——我不确定我做的是否正确，因为它似乎并没有改变任何东西——也许是因为我使用的是 wiki 网页所以我只能创建在页面的一部分内，所以它不会允许这些类型的页面加载命令？就像我说的，我很新，所以我不确定是不是这样。
加载窗口函数是否应该是我页面代码顶部的单独 java 脚本？
不，所有这些都适合页面底部的一个脚本标签
（谢谢你帮助我顺便说一句）所以我只用这段代码制作了一个虚拟页面，以确保没有其他东西搞砸了，我似乎仍然无法让它工作 - wiki每次我尝试保存它时，页面都会给我一个错误。老实说，我认为它可能不喜欢页面加载命令 - 页面设置有自己的 wikinet 页眉和页脚 - 我认为它不会影响我的表格，但是当我取出该命令时，它加载正常。 :-/
定义的 onload 函数实际发生了什么？是否产生错误？屏幕是什么样子的

【解决方案2】：

您可以为表格设置默认样式来隐藏它，这样当它呈现时，它的默认状态将被隐藏。

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

【讨论】：

我确实尝试过将显示样式设置为 none，但随后表格被隐藏，但当用户输入搜索时它不会显示任何结果 - 所以我需要一种让结果可见的方法过滤后。
在回调中，不要将显示属性设为空字符串，而是设为block。
好的/我再次尝试这个 - 我的表格样式设置为不显示 - 所以当我打开页面时，表格是隐藏的，但是当我在盒子。我应该在哪里将 display 属性设置为 block 以否定 table none display for keyup？
在ContactsearchFX 中，将tr[i].style.display = ""; 更改为tr[i].style.display = "block";

【解决方案3】：

我建议在页面加载时运行 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>

【讨论】：