Question

我试图从我的json文件中显示表中的所有行，并使用输入框通过正则表达式搜索动态过滤和显示行。我的代码使用相同的搜索结果填充所有行，而不是最小化行以满足搜索。关于如何前进，我需要一些帮助。我尝试了不同的变化，但无济于事。

这是我的Json文件：

[  
    {  
        "Client_ID":"100",
        "FirstName":"Nancy",
        "LastName":"Rivera",
        "SSNumber":"5555",
        "BirthDate":"1976-05-05",
        "Address":"555 Flatlands Ave",
        "Phone":"718-555-5555",
        "Email":"nrivera@ mycomp.com"
    },
    {  
        "Client_ID":"200",
        "FirstName":"Mary",
        "LastName":"Johnson",
        "SSNumber":"4444",
        "BirthDate":"1974-04-04",
        "Address":"444 Jay Street",
        "Phone":"718-444-4444",
        "Email":"mjohnson@ mycomp.com"
    },
    {  
        "Client_ID":"300",
        "FirstName":"Sam",
        "LastName":"Peterson",
        "SSNumber":"3333",
        "BirthDate":"1973-03-03",
        "Address":"333 Dekalb Ave",
        "Phone":"718-333-3333",
        "Email":"speterson@ mycomp.com"
    },
    {  
        "Client_ID":"400",
        "FirstName":"Angel",
        "LastName":"Rodriguez",
        "SSNumber":"2222",
        "BirthDate":"1972-02-02",
        "Address":"222 Flatbush Ave",
        "Phone":"718-222-2222",
        "Email":"arodriguez@ mycomp.com"
    },
    {  
        "Client_ID":"500",
        "FirstName":"Joel",
        "LastName":"Smiles",
        "SSNumber":"9999",
        "BirthDate":"1971-01-01",
        "Address":"Sappy St",
        "Phone":"718-888-8888",
        "Email":"bunny@mycomp.com"
    }
]

我的代码：

 <div id = "update"></div>
                      ( function( $ ) {


                        $.getJSON("myjson.js", function(data) {
                                var output2 = '<table class="gridtable" border="1" cellpadding="10">';
                                output2 += '<tr>';
                                output2 += '<td><input type="search" name="search" id="search" placeholder="ID" /></td>';
                                output2 += '<td><input type="search" name="search" id="search2" placeholder="First name" /></td>';
                                output2 += '<td><input type="search" name="search" id="search3" placeholder="Last name" /></td>';
                                output2 += '<tr>';
                                output2 += '<tr><th>ID</th><th>First Name</th><th>Last Name</th></tr>';
                            $.each(data, function(key, val) {

                                output2 += '<tr class="myRows">';
                                output2 += '<td>'+ val.Client_ID +'</td>';
                                output2 += '<td>'+ val.FirstName +'</td>'+ '<td>' + val.LastName +'</td>';

                                output2 += '</tr>';

                            });
                            $('#update').html(output2);

                            $('#search').keyup(function() {

                                var searchField = $('#search').val();
                                var myExp = new RegExp(searchField, "i");

                                $.getJSON("myjson.js", function(data) {

                                    $.each(data, function(key, val) {
                                        if ((val.FirstName.search(myExp) != -1) ||
                                            (val.LastName.search(myExp) != -1)) {

                                            the_output = '<td>'+ val.Client_ID +'</td>';
                                            the_output += '<td>'+ val.FirstName +'</td>'+ '<td>' + val.LastName +'</td>';
                                        }
                                    });

                                    $('.myRows').html(the_output);
                                }); //get JSON

                            });
                        }); //get JSON
           } )( jQuery );

Answer 1

为每一行提供一个类：

<tr class="row">

如果搜索框发生更改，您希望遍历每一行，并根据是否符合搜索条件更改可见性：

var rows = document.getElementsByClassName("row");
for (var i = 0; i < rows.length; ++i) {
    if (/* should be visible */)
        rows[i].style.display = "inherit";
    else
        rows[i].style.display = "none";
}

动态过滤html表中的搜索结果

1 个答案: