ボタン付きjQueryテーブル列フィルタ

Question

ボタンを押したときにドロップダウンリストから選択した値でフィルタリングするHTMLテーブルがあります。

私はjQueryセレクタ "#table_id td。[td class]：contains"と "#table_id td。[td class]：not（：contains）"を使用しています。すべてがうまく見えますが、：not（：contains）セレクタは「構文エラー、認識できない式」を返します。他の例でも同じように動作しますが、何らかの理由で動作させることはできません。

$(function() {  
 
    $('#butt1').click(function() { 
 
     $("#tast td.col1:contains('" + $('#selector1').val() + "')").parent().show(); 
 
     $("#tast td.col1:not(:contains('" + $('#selector1').val() + "'))").parent().hide(); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>  
 
<select id="selector1"><option value="all">All</option><option value=" 
 
Sample 1 
 
"> 
 
Sample 1 
 
</option></select> 
 
<button id="butt1"> 
 
Filter 
 
</button> 
 
<table id="tast" class="TableStyle0"> 
 
<thead> 
 
<tr> 
 
<th width="90"> 
 
<p style="text-align: center;"><strong>Code</strong></p> 
 
</th> 
 
<th style="text-align: center;" width="203"> 
 
<p><strong>Dir</strong></p> 
 
</th> 
 
<th style="text-align: center;" width="136"> 
 
<p><strong>Inst</strong></p> 
 
</th> 
 
<th style="text-align: center;" width="98"> 
 
<p><strong>Form</strong></p> 
 
</th> 
 
<th style="text-align: center;" width="91"> 
 
<p><strong>Quota</strong></p> 
 
</th> 
 
<th style="text-align: center;" width="98"> 
 
<p><strong>Target</strong></p> 
 
</th> 
 
<th style="text-align: center;" width="98"> 
 
<p><strong>Total</strong></p> 
 
</th> 
 
<th style="text-align: center;" width="98"> 
 
<p><strong>Total payed</strong></p> 
 
</th> 
 
<th style="text-align: center;" width="81"> 
 
<p><strong>Told</strong></p> 
 
</th> 
 
</tr> 
 
</thead> 
 
<tbody> 
 
<tr> 
 
<td class="col1" valign="bottom" width="90"> 
 
<p>38.03.02</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="203"> 
 
<p>Sample 1</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="136"> 
 
<p>Data 1</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="98"> 
 
<p>Text 1</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="91"> 
 
<p>1</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="98"> 
 
<p>&nbsp;</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="98"> 
 
<p>4</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="98"> 
 
<p>5</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="81"> 
 
<p>60</p> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td class="col1"valign="bottom" width="90"> 
 
<p>38.03.02</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="203"> 
 
<p>Sample 2</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="136"> 
 
<p>Data 2</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="98"> 
 
<p>Text 3</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="91"> 
 
<p>&nbsp;</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="98"> 
 
<p>&nbsp;</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="98"> 
 
<p>&nbsp;</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="98"> 
 
<p>&nbsp;</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="81"> 
 
<p>25</p> 
 
</td> 
 
</tr>

Answer 1

私はそれがより直感的で反復的なコードを削減するよう代わりに:not(:contains())の.hide()を起動し、その後、すべて有効でない要素を選択する.siblings()を使用します。 、おかげでうまく働いた

$(function() {  
 
    $('#butt1').click(function() { 
 
     $("#tast td.col1:contains('" + $('#selector1').val() + "')").parent().show().siblings().hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>  
 
<select id="selector1"><option value="all">All</option><option value=" 
 
Sample 1 
 
"> 
 
Sample 1 
 
</option></select> 
 
<button id="butt1"> 
 
Filter 
 
</button> 
 
<table id="tast" class="TableStyle0"> 
 
<thead> 
 
<tr> 
 
<th width="90"> 
 
<p style="text-align: center;"><strong>Code</strong></p> 
 
</th> 
 
<th style="text-align: center;" width="203"> 
 
<p><strong>Dir</strong></p> 
 
</th> 
 
<th style="text-align: center;" width="136"> 
 
<p><strong>Inst</strong></p> 
 
</th> 
 
<th style="text-align: center;" width="98"> 
 
<p><strong>Form</strong></p> 
 
</th> 
 
<th style="text-align: center;" width="91"> 
 
<p><strong>Quota</strong></p> 
 
</th> 
 
<th style="text-align: center;" width="98"> 
 
<p><strong>Target</strong></p> 
 
</th> 
 
<th style="text-align: center;" width="98"> 
 
<p><strong>Total</strong></p> 
 
</th> 
 
<th style="text-align: center;" width="98"> 
 
<p><strong>Total payed</strong></p> 
 
</th> 
 
<th style="text-align: center;" width="81"> 
 
<p><strong>Told</strong></p> 
 
</th> 
 
</tr> 
 
</thead> 
 
<tbody> 
 
<tr> 
 
<td class="col1" valign="bottom" width="90"> 
 
<p>38.03.02</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="203"> 
 
<p>Sample 1</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="136"> 
 
<p>Data 1</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="98"> 
 
<p>Text 1</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="91"> 
 
<p>1</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="98"> 
 
<p>&nbsp;</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="98"> 
 
<p>4</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="98"> 
 
<p>5</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="81"> 
 
<p>60</p> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td class="col1"valign="bottom" width="90"> 
 
<p>38.03.02</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="203"> 
 
<p>Sample 2</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="136"> 
 
<p>Data 2</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="98"> 
 
<p>Text 3</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="91"> 
 
<p>&nbsp;</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="98"> 
 
<p>&nbsp;</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="98"> 
 
<p>&nbsp;</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="98"> 
 
<p>&nbsp;</p> 
 
</td> 
 
<td class="col1"valign="bottom" width="81"> 
 
<p>25</p> 
 
</td> 
 
</tr>