过滤表并仅显示​​它匹配

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>

根据您的请求，现在隐藏一切，但匹配输入字符串的元素。没有输入字符串，一切都会显示。

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/