作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 jQuery 新手。
我有这个表,需要根据包含不同类别值的复选框进行过滤。这是我一直在编写的代码
<input class="prod_status" type="checkbox" value="Discontinued">Discontinued<br/>
<input class="prod_status" type="checkbox" value="Shipping">Shipping<br/>
<input class="prod_capacity" type="checkbox" value="1GB">1GB<br/>
<input class="prod_capacity" type="checkbox" value="2GB">2GB<br/>
<input class="prod_capacity" type="checkbox" value="4GB">4GB<br/>
<input class="prod_speed" type="checkbox" value="1000MHz">1000MHz<br/>
<input class="prod_speed" type="checkbox" value="1333MHz">1333MHz<br/>
<br /><br />
<table class="someclass" border="0" cellpadding="0" cellspacing="0" summary="bla">
<caption>bla bla</caption>
<thead>
<tr id="ProductID">
<th>Product Number</th>
<th>Status</th>
<th>Capacity</th>
<th>Speed</th>
</tr>
</thead>
<tbody>
<tr id="Memory1" class="part_detail">
<td class="name">Memory1</td>
<td class="status">Shipping</td>
<td class="capacity">1GB</td>
<td class="speed">1333MHz</td>
</tr>
<tr id="Memory2" class="part_detail">
<td class="name">Memory2</td>
<td class="status">Discontinued</td>
<td class="capacity">2GB</td>
<td class="speed">1000MHz</td>
</tr>
<tr id="Memory3" class="part_detail">
<td class="name">Memory3</td>
<td class="status">Shipping</td>
<td class="capacity">2GB</td>
<td class="speed">1333MHz</td>
</tr>
<tr id="Memory4" class="part_detail">
<td class="name">Memory4</td>
<td class="status">Discontinued</td>
<td class="capacity">4GB</td>
<td class="speed">1000MHz</td>
</tr>
<tr id="Memory5" class="part_detail">
<td class="name">Memory5</td>
<td class="status">Shipping</td>
<td class="capacity">4GB</td>
<td class="speed">1333MHz</td>
</tr>
</tbody>
</table>
var oData = $("tbody tr.part_detail");
$(":checkbox.prod_status").change(function() {
var checkedValues = $(":checkbox.prod_status:checked").map(function() {
return this.value;
}).get();
if (checkedValues.length > 0) {
oData.hide();
for (var i = 0; i < checkedValues.length; i++) {
oData.filter(function() {
if (checkedValues[i].toString() == $(this).find('.status').text())
$(this).show();
});
}
}
else
$("tbody tr.part_detail").show();
});
我只设法让它与状态类别一起使用。之后我基本上就卡住了。我有一种感觉,我让事情变得比应有的更复杂,但我的 jQuery 经验不足以让它变得更好。
我尝试将要求总结如下:
换句话说,逻辑“与”应用于不同类别之间,而逻辑“或”应用于类别内。
任何帮助将不胜感激。
最佳答案
看到这个 fiddle http://jsfiddle.net/abhiklpm/ZEDR9/5/
我修改了您的 html,添加了 "rel" 属性和一些 "class" 以便轻松访问数据:
$("input:checkbox").click(function () {
var showAll = true;
$('tr').not('.first').hide();
$('input[type=checkbox]').each(function () {
if ($(this)[0].checked) {
showAll = false;
var status = $(this).attr('rel');
var value = $(this).val();
$('td.' + status + '[rel="' + value + '"]').parent('tr').show();
}
});
if(showAll){
$('tr').show();
}
});
编辑:我在 fiddle 中犯了一个错误,
更改:
<td class="capacity" rel="Shipping">2GB</td>
至: <td class="capacity" rel="2GB">2GB</td>
否则,2Gb 时将仅显示 1 个结果。
关于jquery - 根据多个复选框过滤表行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19963937/
我是一名优秀的程序员,十分优秀!