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 是个好主意。