html - 隐藏行 <tr> 而不从 DOM 中移除

Question

我有一张带有搜索功能的表格。搜索函数获取表格元素并遍历所有行以检查 innerText 中是否有匹配的内容(也许整个实现并不理想，请随时发表评论)。

这里的问题是，我想保留 DOM 中的每一行，这样任何新的搜索都会考虑所有行。另一方面，我希望搜索隐藏所有不匹配的行。

我认为在这里很容易找到解决方案，但我没有找到......到目前为止我已经尝试过:

• display: none - 从 DOM 中移除
• visiblity:hidden - 保留行的空间
• height: 0px - 不起作用...我的高度更高，0px 没有任何效果

我试图避免使用 JQuery 并改用 Angular 2 (v4) 工具

编辑:这里是一个plunker我的实现

Answer 1

您可以使用位置:

.hide {
  position: absolute;/* remove from flow*/
  right: 100%;/* send outside screen area */
}
/* is it there ? */
table:hover .hide {
   position:static;
}

<table>
  <thead>
    <tr>
      <th>th</th>
      <th>th</th>
      <th>th</th>
      <th>th</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr class="hide">
      <td>hidden-row</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
  </tbody>
</table>

如果内容只是要隐藏的文本，font-size & line-height 的另一种选择:

.hide {
  font-size:0;/* hide text */
  line-height:0;/* reduce line-height*/
  letter-spacing:0.46rem; /* eventually reset letter-spacing  */
}

<div class="container-fluid">
  <input type="text" (input)="filter($event.target.value)" />
  <table #table=''>
    <tr>
      <th>Name</th>
      <th>Favorite Color</th>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Yellow</td>
    </tr>
    <tr class="hide">
      <td>Michelle</td>
      <td>Purple</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Green</td>
    </tr>
    <tr>
      <td>Mike</td>
      <td>Blue</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Red</td>
    </tr>
  </table>

</div>