带按钮的jQuery表列过滤器
问题描述:
我有一个HTML表格,当按下按钮时,该表格应该从下拉列表中选定的值进行过滤。我使用jQuery选择器“#table_id td。[td class]:contains”和“#table_id td。[td class]:not(:contains)”。一切看起来都不错,但是:not(:contains)选择器返回“Syntax error,unrecognized expression”。它在其他例子中以相同的方式工作,但由于某种原因无法使其工作。带按钮的jQuery表列过滤器
$(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> </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> </p>
</td>
<td class="col1"valign="bottom" width="98">
<p> </p>
</td>
<td class="col1"valign="bottom" width="98">
<p> </p>
</td>
<td class="col1"valign="bottom" width="98">
<p> </p>
</td>
<td class="col1"valign="bottom" width="81">
<p>25</p>
</td>
</tr>
答
我会用.siblings()
选择所有无效的元素,然后调用.hide()
而不是:not(:contains())
,因为它是更直观,更会减少重复的代码。
$(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> </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> </p>
</td>
<td class="col1"valign="bottom" width="98">
<p> </p>
</td>
<td class="col1"valign="bottom" width="98">
<p> </p>
</td>
<td class="col1"valign="bottom" width="98">
<p> </p>
</td>
<td class="col1"valign="bottom" width="81">
<p>25</p>
</td>
</tr>
这工作就好了,谢谢!我添加了代码来隐藏不必要的元素后显示列'$(function(){ $('#butt1')。click(function(){0121} ('#selector1')。val()+“')”)。parent()。show()。siblings()。hide(); $(“#tast td.col1:contains('”+ $ ';#selector1')。val()+“')”)。parent()。show(); }); });'' – mkrl