How to search through GridView records in asp.net using jQuery

Introduction:

Here I Will explain How to search through GridView records using jQuery.
 

Example:

 

//Code Starts
$(document).ready(function() {
    $('#<%=lblNoRecords.ClientID%>').css('display','none');

    $('#<%=btnSubmit.ClientID%>').click(function(e)
    {
        // Hide No records to display label.
        $('#<%=lblNoRecords.ClientID%>').css('display','none'); 
        //Hide all the rows.
        $("#<%=gdRows.ClientID%> tr:has(td)").hide(); 
        
        var iCounter = 0;
        //Get the search box value
        var sSearchTerm = $('#<%=txtSearch.ClientID%>').val(); 
        
        //if nothing is entered then show all the rows.
        if(sSearchTerm.length == 0) 
        {
          $("#<%=gdRows.ClientID%> tr:has(td)").show(); 
          return false;
        }
        //Iterate through all the td.
        $("#<%=gdRows.ClientID%> tr:has(td)").children().each(function() 
        {
            var cellText = $(this).text().toLowerCase();
            //Check if data matches
            if(cellText.indexOf(sSearchTerm.toLowerCase()) >= 0) 
            {    
                $(this).parent().show();
                iCounter++;
                return true;
            } 
        });
        if(iCounter == 0)
        {
            $('#<%=lblNoRecords.ClientID%>').css('display','');
        }
        e.preventDefault();
    })
})
//Code Ends