jquery - jQuery筛选器表按复选框

  显示原文与译文双语对照的内容
0 0

我希望能够用复选框过滤一个 table,这是我发现的,但看起来不是这样的。

Basiclly我希望 table 隐藏没有检查的那个,并显示。 HTML代码


 <div class="tags">
 <label><input type="checkbox" rel="a"/> a </label>
 <label><input type="checkbox" rel="x"/> x </label>

</div>

<table>
 <thead>
 <tr><th>list</th></tr>
 </thead>
 <tbody>
 <tr><td>a</td></tr>
 <tr><td>a</td></tr>
 <tr><td>b</td></tr>
 <tr><td>a</td></tr>
 <tr><td>x</td></tr>

 </tbody>
</table>

JS代码


$('div.tags').delegate('input:checkbox', 'change', function()
{
 var $lis = $('table tbody> tr').hide();
//For each one checked
 $('input:checked').each(function()
 {
 $lis.filter('.' + $(this)).show();
 }); 
}).find('input:checkbox').change();

我在想我是不是做了错误的事情?

时间: 原作者:

0 0

下面是HTML和 JavaScript ( 都被修改过):


<div class="tags">
 <label><input type="checkbox" rel="a"/> a </label>
 <label><input type="checkbox" rel="x"/> x </label>
</div>

<table>
 <thead>
 <tr><th>list</th></tr>
 </thead>
 <tbody>
 <tr class="a"><td>a</td></tr>
 <tr class="a"><td>a</td></tr>
 <tr class="b"><td>b</td></tr>
 <tr class="a"><td>a</td></tr>
 <tr class="x"><td>x</td></tr>
 </tbody>
</table>


var updateRows = function()
{
//Get ones to show
 var toShow = [];
 $('div.tags input[type=checkbox]:checked').each(function(){
 var box = $(this);
 toShow.push('.' + box.attr('rel'));
 });
 toShow = toShow.join(', ');

//Filter rows
 $('table> tbody> tr').each(function() {
 var row = $(this);
 row.toggle( row.is(toShow) );
 });
};
$('div.tags input[type=checkbox]').click(updateRows);
updateRows();

HTH

0 0

选择 delegate 作为筛选器对所选元素的筛选。 它不像 find 那样工作,而是查找包含在所选元素中的元素。 这意味着你的更改函数不应用于任何内容,因为筛选器选择器不支持到目前为止的任何元素选择。 考虑到 HTML,你可以简化它,不涉及委托处理程序。

这里外,处理程序试图选择要使用类选择器显示的行,但行没有它的值作为内容的类。 你应该给行提供适当的类,或者更改你选择行的方式。


$('div.tags input:checkbox').change( function()
{
 var selection = $(this).val();
 var $lis = $('table tbody> tr').hide();
//For each one checked
 $('input:checked').each(function()
 {
 $lis.filter( function() { return $(this).text() == selection; }).show();
 }); 
});

原作者:
...