Question

我目前有一张图片表：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>Package 1</label>
<input type="checkbox" class="product" id="package1">
<label>Package 2</label>
<input type="checkbox" class="product" id="package2">
<div id="combined">
  <p>Package 1 & 2</p>
  <div class="check">
    <label>What time is it?</label>
    <input type="checkbox">
  </div>
</div>
<div id="pack1-details">
  <p>Package 1 only</p>
  <div class="check">
    <label>When does Spring start?</label>
    <input type="checkbox">
  </div>
</div>
<div id="pack2-details">
  <p>Package 2 only</p>
  <div class="check">
    <label>Where is Greece?</label>
    <input type="checkbox">
  </div>
</div>

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

Answer 1

快速而肮脏。我已经设置了输入，当输入文本时，它使用jQuery过滤包含输入文本的任何div。如果未输入任何文本，则不会突出显示任何内容。

＆＃13;

$(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();
    }
  });
});

＆＃13;

.filtered {
  background-color: #ccc;
}

＆＃13;

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

＆＃13;

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

Answer 2

// For instance filtering the 7th image
var filterCriteriaStr = 7;
$('td').not(':contains('+filterCriteriaStr+')').hide();
$('td').filter(':contains('+filterCriteriaStr+')').show();

以下是工作示例：https://jsfiddle.net/9gt3t2jk/1/

过滤表格并仅显示匹配的表格

2 个答案: