c# - 在表格排序器不应用表格 css 样式之后？

Question

我为页面中的表格应用了 tablesorter css 样式。如果文本框输入的数据与表格网格数据的任何列匹配需要为该行应用不同的颜色，我还需要为行应用另一种样式。

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

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

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

                    if ($(this).find("td:eq(4)").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>

表格排序器 CSS:

table.tablesorter {
    font-family:arial;
    color: rgb(51, 51, 51);
    margin:10px 0pt 15px;
    font-size: 8pt;
    width: 100%;
    text-align: left;
 }
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #8dbdd8;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 5px;
}
table.tablesorter thead tr .header:not(.nosort) {
     background-image: url('/sorter/bg.gif');  
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter tbody td {

        background-color: rgb(239, 243, 251);
        padding: 5px;
        border: solid 1px #e8eef4;

    vertical-align: top;
}
table.tablesorter tbody tr.odd td {
    background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp:not(.nosort) {
    background-image: url('/sorter/asc.gif');
}
table.tablesorter thead tr .headerSortDown:not(.nosort) {
    background-image: url('/sorter/desc.gif'); 
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
 .divpager
    {
        display: inline-block;
        float: left;
    }

当搜索文本与任何表格网格行数据匹配时，我无法应用匿名函数行颜色。请告诉我。

Answer 1

试试这个代码(demo):

$(function () {
    grid = $('#tblsearchresult tbody');
    // handle search fields key up event
    $('#search-term').on('keyup search', function (e) {
        text = $(this).val().toUpperCase(); // grab search term
        if (text.length > 1) {
            // iterate through all grid rows
            grid.find('tr').each(function (i) {
                var found = false;
                $(this).children().each(function(j){
                    if (this.textContent.toUpperCase().match(text)) {
                        $(this).addClass('result');
                        found = true;
                    }
                });
                $(this).toggle(found);
            });
        } else {
            grid.find('td').removeClass('result');
            grid.find('tr').show();
        } // if no matching name is found, show all rows
    });
});

$('table').tablesorter();