Question

我编写了以下代码，用于在表格中查找记录。

$(function () {

        grid = $('#tblsearchresult');
        // handle search fields key up event
        $('#search-term').keyup(function (e) {
            text = $(this).val(); // grab search term

            if (text.length > 1) {

                // iterate through all grid rows
                grid.find('tr').each(function (i) {

                    if ($(this).find('td:eq(1)').text().toUpperCase().match(text.toUpperCase()))
                        $(this).css({ background: "#A4D3EE" });


                });
            }
            else {
                grid.find('tr:has(td)').css({ background: "" });
                grid.find('tr').show();
            } // if no matching name is found, show all rows
        });

    });



 <table id="tblsearchresult" class="tablesorter"">
            <thead> 
                    <tr>

                        <th>ApplicationName</th>

                  </tr>
            </thead> 

        <tbody>
                <% foreach (var request in Model.ApplicationRoles)
                   { %>
                <tr>

                    <td>
                        <span id="appName_<%: request.Id%>">
                            <%: request.Application.Name%></span>
                    </td>
    </tr>
    </tbody>
    </table>

编辑表格数据

  applicationame   role
application1     appadministrator
app              developer
application2      tester

如果我给'app'as搜索文本只需要突出secondrow.highlightling firstrow也因为'app'在firstrow中有作用。每个行都应该突出显示匹配。请告诉我。

Answer 1

在解析之前，您需要清除突出显示。添加你的这句话：

grid.find('tr:has(td)').css({ background: "" });

进入此循环之前：

// iterate through all grid rows
grid.find('tr').each(function (i) {
    ...
});

检查这个小提琴： http://jsfiddle.net/F3jRj/1/

这个更新的小提琴有3列： http://jsfiddle.net/F3jRj/2/

Answer 2

您的代码表现正常。只需要首先清除输入文本“keyup”上所有先前突出显示的行。

if (text.length > 1) {
grid.find('tr:has(td)').css({ background: "" });
grid.find('tr').show();
......rest of your code.......

使用javascript找到基于搜索的记录？

2 个答案: