は、テーブルをフィルタリングし、それは私が現在、画像のテーブル持って

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

クイックと汚れ。私は入力を設定しました。テキストが入力されると、入力されたテキストを含むdivをフィルタリングするためにjQueryを使用しています。テキストを入力しないと、何も強調表示されません。あなたの要求ごとに

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

、それは今、入力文字列に一致する要素以外のすべてを隠します。 NO入力文字列では、すべてが表示されます。

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/