表格排序器未应用表格CSS样式后？

Question

I applied tablesorter css styles for a table in a page.And i also i need to apply another style for rows if textbox entered data matching with any column of table grid data need to apply different color for that row.

$(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>

tablesorter 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;
    }

I am not able apply anonymous function row color when search text macthed with any table grid row data.please tell me.

Answer 1

Try this code ( 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();