Question

我有一个带搜索功能的表。搜索函数获取表元素并遍历所有行以检查innerText中是否存在匹配的内容（可能整个实现不理想，随意发表评论）。

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

我认为在这里找到解决方案很容易，但我找不到......到目前为止我做过的尝试：

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

我试图避免使用JQuery并使用Angular 2（v4）工具

编辑：这是我实施的plunker

Answer 1

您可以使用position：

＆＃13;

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

＆＃13;

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

＆＃13;

另一个选项，如果内容只是要隐藏的文字，font-size＆amp; line-height：

＆＃13;

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

＆＃13;

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

＆＃13;

隐藏行而不从DOM

1 个答案: