如何使用jQuery过滤表（表数据是从JSON文件填充的）？

I have a table which has some user details. I have populated those data from JSON. At the bottom of the table , i have a text field which is provided for users who can type some information to filter the table. For example,

我有一个表有一些用户的详细信息。我已经从JSON填充了这些数据。在表的底部，我有一个文本字段，提供给可以键入一些信息来过滤表的用户。例如，

Consider a table contains 10 rows. the first 6 rows contains developer details and the last 4 rows contains tester details. If a user type developer in the text box , then the table should display the rows, which contain information about the developer. how can i achieve this by using jQuery ?

考虑一个包含10行的表。前6行包含开发人员详细信息，后4行包含测试人员详细信息。如果用户在文本框中键入开发人员，则表应显示行，其中包含有关开发人员的信息。我怎样才能通过使用jQuery实现这一目标？

I don't want to post my wrong code here. so please don't ask me to post some code.

我不想在这里发布错误的代码。所以请不要让我发布一些代码。

2 个解决方案

#1

You can use the filter() jquery function to filter through the rows until you find the ones which <td> matches what you write in a text box and filter after you click a button.

您可以使用filter（）jquery函数来过滤行，直到找到与您在文本框中写入的内容匹配的行，并在单击按钮后进行过滤。

Example:

例：

HTML:

HTML：

<table id="myTable">
    <thead><tr><td>Member</td><td>Stuff</td></tr></thead>
    <tbody>
        <tr><td>Developer</td><td>1</td></tr>
        <tr><td>Developer</td><td>2</td></tr>
        <tr><td>Developer</td><td>3</td></tr>
        <tr><td>Tester</td><td>4</td></tr>
        <tr><td>Tester</td><td>5</td></tr>
    </tbody>
</table>
<input type="text" id="filter" />
<input type="button" id="btnFilter" value="Filter" />

Javascript:

使用Javascript：

$(document).ready(function() {
    $("#btnFilter").click(function() {
        $("#myTable tbody tr").show();
        if($("#filter").val.length > 0) {
            $("#myTable tbody tr").filter(function(index, elm) {
                return $(elm).html().toUpperCase().indexOf($("#filter").val().toUpperCase()) < 0;
            }).hide();
        }
    });
});

Working fiddle: http://jsfiddle.net/tKqw9/1/

工作小提琴：http：//jsfiddle.net/tKqw9/1/

EDIT: Added toUpperCase() to the text compare part so it compares case insensitive. Also added a compare to the whole <tr> element content so it can search over any cell value in the row.

编辑：将toUpperCase（）添加到文本比较部分，以便它比较不区分大小写。还添加了与整个元素内容的比较，以便它可以搜索行中的任何单元格值。

#2

You may want to consider a plugin like Datatables. It has built in filter functionality similar to what you're looking for.

您可能需要考虑像Datatables这样的插件。它内置了类似于您所需的过滤功能。

http://www.datatables.net/

If you don't want to or can't use a plugin there are other options out there.

如果您不想或不能使用插件，那么还有其他选择。

#1