如何使用jQuery过滤表(表数据是从JSON文件填充的)?

时间:2014-06-27 16:53:14

标签: jquery html json

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

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

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

2 个答案:

答案 0 :(得分:3)

您可以使用filter() jquery函数来过滤行,直到找到<td>与您在文本框中写入的内容相匹配的行,然后在单击按钮后进行过滤。

示例:

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

$(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();
        }
    });
});

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

编辑:将toUpperCase()添加到文本比较部分,以便比较不区分大小写。 还添加了与整个<tr>元素内容的比较,以便它可以搜索行中的任何单元格值。

答案 1 :(得分:2)

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

http://www.datatables.net/

如果您不想或不能使用插件,则有other options out there