jquery - jQuery - 如何在点击时过滤行？

Question

当我单击按钮时，我试图弄清楚如何根据行类过滤表。我一直在查看各种 jquery 插件，但它们似乎都没有做我需要它做的事情。有些有过滤的文本框等，我已经尝试过调整代码，但坦率地说，我只是把事情搞得一团糟……救命？我有一个看起来像这样的表：

<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

这样的事情可能会奏效：

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

向您的表添加一个 ID 将是一个好主意。

Answer 2

您可以为每个按钮单击分别执行以下操作，它应该可以解决。

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

IE：

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

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 -->

查询：

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

并且您对其他按钮执行相同操作。

Answer 4

DataTables完全满足您的需求：

• 列或行过滤
• 行创建的事件处理
• 从单个搜索文本框中过滤所有列
• 多列排序
• 可编辑行

我已经在生产项目中使用了它，在某些情况下我选择使用 DataTables 而不是 Telerik RadGrad。它非常灵活，非常适合 RIA。