[英]hide some table row according to multiple checkbox selection with jquery
Hi I have 2 tables like this with some checkbox for filter the table: 嗨,我有2个这样的表格,其中的某些复选框用于过滤表格:
<label><input type="checkbox" name="chk_filter_Grocery_1" id="chk_filter_Grocery_1_1" value="1;">Alamond</label>
<label><input type="checkbox" name="chk_filter_Grocery_1" id="chk_filter_Grocery_1_2" value="14;">Apple</label>
<label><input type="checkbox" name="chk_filter_Grocery_1" id="chk_filter_Grocery_1_3" value="5;6;">Lemon & Orange</label>
<label><input type="checkbox" name="chk_filter_Grocery_1" id="chk_filter_Grocery_1_4" value="17;">Coconut</label>
<table width="620px" id="Grocery-NA768">
<tbody>
<tr class="14">
<td width="185" height="35" align="left">Apple</td>
<td width="65" height="35" align="center" valign="middle">3 Kg</td>
<td width="80" height="35" align="center" valign="middle">28/07/2011</td>
</tr>
<tr class="5">
<td height="35" align="left">Lemon</td>
<td height="35" align="center" valign="middle">5 Kg</td>
<td height="35" align="center" valign="middle">28/07/2011 </td>
</tr>
<tr class="17">
<td height="35" align="left">Coconut</td>
<td height="35" align="center" valign="middle">4 Kg</td>
<td height="35" align="center" valign="middle">28/07/2011 </td>
</tr>
<tr class="14">
<td height="35" align="left">Apple</td>
<td height="35" align="center" valign="middle">2 Kg</td>
<td height="35" align="center" valign="middle">27/04/2011 </td>
</tr>
<tr class="1">
<td height="35" align="left">Almond</td>
<td height="35" align="center" valign="middle">3 Kg</td>
<td height="35" align="center" valign="middle">27/04/2011 </td>
</tr>
<tr class="6">
<td height="35" align="left">Orange</td>
<td height="35" align="center" valign="middle">3 kg</td>
<td height="35" align="center" valign="middle">27/04/2011 </td>
</tr>
</tbody>
</table>
<label><input type="checkbox" name="chk_filter_Wine_1" id="chk_filter_Wine_1_1" value="51;">Brunello di Montalcino</label>
<label><input type="checkbox" name="chk_filter_Wine_1" id="chk_filter_Wine_1_2" value="4;">Dolcetto</label>
<label><input type="checkbox" name="chk_filter_Wine_1" id="chk_filter_Wine_1_3" value="35;64;">Pinot noir & Pinot blanc</label>
<label><input type="checkbox" name="chk_filter_Wine_1" id="chk_filter_Wine_1_4" value="72;">Shiraz </label>
<table width="620px" id="Wine-NA768">
<tbody>
<tr class="4">
<td width="185" height="35" align="left">Dolcetto</td>
<td width="65" height="35" align="center" valign="middle">3 b</td>
<td width="80" height="35" align="center" valign="middle">28/07/2011</td>
</tr>
<tr class="35">
<td height="35" align="left">Pinot blanc</td>
<td height="35" align="center" valign="middle">5 b.</td>
<td height="35" align="center" valign="middle">28/07/2011 </td>
</tr>
<tr class="72">
<td height="35" align="left">Shiraz</td>
<td height="35" align="center" valign="middle">4 b.</td>
<td height="35" align="center" valign="middle">28/07/2011 </td>
</tr>
<tr class="14">
<td height="35" align="left">Dolcetto</td>
<td height="35" align="center" valign="middle">2 b.</td>
<td height="35" align="center" valign="middle">27/04/2011 </td>
</tr>
<tr class="51">
<td height="35" align="left">Brunello di Montalcino</td>
<td height="35" align="center" valign="middle">3 b.</td>
<td height="35" align="center" valign="middle">27/04/2011 </td>
</tr>
<tr class="64">
<td height="35" align="left">Pinot noir</td>
<td height="35" align="center" valign="middle">3 b.</td>
<td height="35" align="center" valign="middle">27/04/2011 </td>
</tr>
</tbody>
</table>
The two table have a different id (Grocery-NA768) and (Wine-NA768) and each checkbox has one or more (max 2) value (1;12;) and every of the table has the corresponding number as class. 这两个表具有不同的ID(Grocery-NA768)和(Wine-NA768),并且每个复选框都有一个或多个(最大2)值(1; 12;),并且每个表都有对应的数字作为类。
I would like to filter the table clicking on the checkbox. 我想过滤表格,单击复选框。 Ie when I click the apple checkbox (value 14) I want to see only the apple in the table (class 14), then if I click on the citrus (value 1;12;) checkbox I will see apple (class 14), lemon (class 5)and orange. 即,当我单击“苹果”复选框(值14)时,我只想看到表中的苹果(第14类),然后如果单击“柑橘”(值1; 12;)复选框,我将看到苹果(第14类),柠檬(5类)和橙色。 If I deselect all the checkbox I will see the whole list. 如果取消选中所有复选框,则将看到整个列表。 Same thing for the wine table. 酒桌也一样。 I site new of jquery and I've found how to show or hide table row clicking on a checkbox but nothing similar to my needs. 我找到了新的jquery,发现如何单击复选框来显示或隐藏表行,但与我的需求没有任何相似之处。
Thanks in advance Michele 在此先感谢Michele
Working example: http://jsfiddle.net/petersendidit/6dNKA/3/ 工作示例: http : //jsfiddle.net/petersendidit/6dNKA/3/
See comments in the code: 查看代码中的注释:
// Define some config objects and loop over them to get things set up
$.each([{
table: $("#Grocery-NA768"),
inputs: $("input[name='chk_filter_Grocery_1']")
},{
table: $("#Wine-NA768"),
inputs: $("input[name='chk_filter_Wine_1']")
}],function(i, obj){
var list = [];
obj.inputs.click(function() {
var that = $(this),
value = that.val().match(/\d+/g),
rows = obj.table.find("tr");
// If its checked then add it to the list
if ( that.prop("checked") ) {
list = $.merge(list, value);
} else {
// if its not then remove the items from the list
list = $.map( list, function( x ) {
return ( $.inArray( x, value ) > -1 ) ? null : x;
});
}
// If the list has items
if ( list.length ) {
rows.hide() // hide all rows
.filter("."+list.join(",.")) // find the ones we care about
.show(); // and show them
} else {
// If no items in the list
rows.show(); // show every row
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.