Jqueryフィルタリングテーブルのデータ属性の結果

Question

日付を列に表示する単純なテーブルがあります。各<td>にはデータ属性data-portがあります。ドロップダウンリストから選択したオプションに基づいて、表に示す結果をフィルタリングしたいと思います。

HTMLは次のとおりです。

<select id='filter'> 
<option></option> 
<option value='fd18'>OPTION A</option> 
<option value='af13'>OPTION B</option> 
</select> 

<table id='table1'> 
<tbody> 
<tr> 
    <td data-port="fd18"><div id="123" class="title">123</div></td> 
    <td data-port="af13"><div id="456" class="title">456</div></td> 
    <td data-port="0000"><div id="789" class="title">789</div></td> 
    <td data-port="fd18"><div id="213" class="title">213</div></td> 
</tr> 

<tr> 
    <td data-port="fd18"><div id="345" class="title">345</div></td> 
    <td data-port="af13"><div id="946" class="title">946</div></td> 
    <td data-port="0000"><div id="368" class="title">368</div></td> 
    <td data-port="af13"><div id="246" class="title">246</div></td> 
</tr> 

<tr> 
    <td data-port="af13"><div id="642" class="title">642</div></td> 
    <td data-port="fd18"><div id="759" class="title">795</div></td> 
    <td data-port="fd18"><div id="335" class="title">335</div></td> 
    <td data-port="fd18"><div id="556" class="title">556</div></td> 
</tr> 
</tbody> 
</table> 

私は、TDのデータポートが選択されたオプションに等しいを表示し、残りを非表示にしようとしているjqueryのを使用します。どうやってこれを行うことができ、テーブルレイアウトを動的に更新して、きれいな列で終わるようにすることができます。

私が使用しているjQueryのです：

$('#filter').change(function() { 
    var port = $(this).val() 
    console.log(port) 
    $("td > [data-port!=" + port+ "]").hide(); 
    $("td > [data-port=" + port+ "]").show(); 
}); 

コンソールが返され、正しい値を示しているが、私は

と一致していないものだけでなく、ページ上のすべてのTDのを隠してしまいます

どのように私はこれを行うことができますすべてのアイデア。 おかげ

Answer 1

は、あなたが探しているものを、このです：

$('#filter').change(function() { 
 
    var port = $(this).val() 
 
    console.log(port) 
 
    if (port !== '') { 
 
     $("td[data-port!=" + port+ "]").css('visibility', 'hidden'); 
 
     $("td[data-port=" + port+ "]").css('visibility', 'visible'); 
 
    } else { 
 
     $("td").css('visibility', 'visible'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id='filter'> 
 
<option value=''></option> 
 
<option value='fd18'>OPTION A</option> 
 
<option value='af13'>OPTION B</option> 
 
</select> 
 

 
<table id='table1'> 
 
<tbody> 
 
<tr> 
 
    <td data-port="fd18"><div id="123" class="title">123</div></td> 
 
    <td data-port="af13"><div id="456" class="title">456</div></td> 
 
    <td data-port="0000"><div id="789" class="title">789</div></td> 
 
    <td data-port="fd18"><div id="213" class="title">213</div></td> 
 
</tr> 
 

 
<tr> 
 
    <td data-port="fd18"><div id="345" class="title">345</div></td> 
 
    <td data-port="af13"><div id="946" class="title">946</div></td> 
 
    <td data-port="0000"><div id="368" class="title">368</div></td> 
 
    <td data-port="af13"><div id="246" class="title">246</div></td> 
 
</tr> 
 

 
<tr> 
 
    <td data-port="af13"><div id="642" class="title">642</div></td> 
 
    <td data-port="fd18"><div id="759" class="title">795</div></td> 
 
    <td data-port="fd18"><div id="335" class="title">335</div></td> 
 
    <td data-port="fd18"><div id="556" class="title">556</div></td> 
 
</tr> 
 
</tbody> 
 
</table>

あなたのjQueryのコードでは、あなたのTD後に矢印記号を持っています。 つまり、最初の子の後にのTDのデータポートattrがあります。 あなたの場合、TDにはデータポートattr selfがあります。