javascript - 过滤表格并仅显示它匹配的

Question

我目前有一个图像表:

<table>
<tr>
    <td><img src="img1.png">Image 1</td>
    <td><img src="img2.png">Image 2</td>
    <td><img src="img3.png">Image 3</td>
    <td><img src="img4.png">Image 4</td>
    <td><img src="img5.png">Image 5</td>
    <td><img src="img6.png">Image 6</td>
</tr>
<tr>
    <td><img src="img7.png">Image 7</td>
    <td><img src="img8.png">Image 8</td>
    <td><img src="img9.png">Image 9</td>
    <td><img src="img10.png">Image 10</td>
    <td><img src="img11.png">Image 11</td>
    <td><img src="img12.png">Image 12</td>
</tr></table>

并希望在它们上放置一个可搜索的过滤器。我在互联网上尝试了几个 Javascript 过滤器，但是它过滤了整行，而不仅仅是我想要的图像。有任何想法吗？非常感谢。

Answer 1

又快又脏。我已经设置了一个输入，当输入文本时，它使用 jQuery 来过滤包含输入文本的任何 div。当未输入任何文本时，不会突出显示任何内容。

$(function() {
  $("#filter-string").on("keyup", function() {
    var filterBy = $(this).val();
    $("td").removeClass("filtered").show();
    if (filterBy.length > 0) {
      $("td").hide();
      $("td:contains('" + filterBy + "')")
        .addClass("filtered").show();
    }
  });
});

.filtered {
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><img src="img1.png">Image 1</td>
    <td><img src="img2.png">Image 2</td>
    <td><img src="img3.png">Image 3</td>
    <td><img src="img4.png">Image 4</td>
    <td><img src="img5.png">Image 5</td>
    <td><img src="img6.png">Image 6</td>
  </tr>
  <tr>
    <td><img src="img7.png">Image 7</td>
    <td><img src="img8.png">Image 8</td>
    <td><img src="img9.png">Image 9</td>
    <td><img src="img10.png">Image 10</td>
    <td><img src="img11.png">Image 11</td>
    <td><img src="img12.png">Image 12</td>
  </tr>
</table>
<div class="filter-pane">
  <label for="filter-string">Enter filter</label>
  <input type="text" id="filter-string" />
</div>

根据您的请求，它现在隐藏除与输入字符串匹配的元素之外的所有内容。没有输入字符串，一切都会显示。