jQuery如何过滤排果?

Question

我试图找出如何过滤表根据排班时我按一个按钮。我一直在寻找各种插件，但他们都没看起来要做什么，我需要它做的。一些具有文本框过滤器等， 我尝试适应的代码，但坦率地说，我只是做了一个大大的混乱...有帮助吗？我有一个表，是这样的：

<table>
<tr class="dr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="mr"><td>data</td></tr>
<tr class="mr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
</table>

和我有三个按钮：

<input type="button" name="filterdr" /> <!-- clicking this will only show rows with dr class -->
<input type="button" name="filtersr" /> <!-- clicking this will only show rows with sr class -->
<input type="button" name="filtermr" /> <!-- clicking this will only show rows with mr class -->

Answer 1

您可以做类似下面分别对每个按钮的点击，它应该工作了。

$("tr:not(.dr)").hide();
$("tr.dr").show();

IE：

$(document).ready(function(){
    $(":button[name='filterdr']").click(function(){
        $("tr:not(.dr)").hide();
        $("tr.dr").show();
    });
});

Answer 2

这样的事情可能做的伎俩：

$('input[type=button]').click(function()
{
    $('tr').hide()
        .filter('.' + this.name.replace(/filter/, '')).show();
});

添加一个ID到表将是一个不错的主意。

Answer 3

<input type="button" id="filterdr" /> <!-- clicking this will only show rows with dr class -->
<input type="button" id="filtersr" /> <!-- clicking this will only show rows with sr class -->
<input type="button" id="filtermr" /> <!-- clicking this will only show rows with mr class -->

JQuery的：

$('#filterdr').click(function() { 
   $('table tr').hide();
   $('table tr.dr').show();
});

和您的其他按钮做同样的。

Answer 4

数据表 不正是你需要：

• 列或行筛选
• 事件处理进行创作
• 筛选用于所有列从一个单一的搜索框
• 多列的排序
• 编辑行

我用这个生产项目和某些情况下，我们选用的数据表过阶段RadGrad.这是非常灵活和伟大的RIA。