Search a row in a table

Hi AMit

   I want to pass the value in Textbox from here . Then it should search a table

protected void ddlBook_SelectedIndexChanged(object sender, EventArgs e)
        {
            searchBox = ddlbook.selecteditem.value
}
            
              

Thanks

  


  
  


  

    

      
Book
      
Author
    
    

      
Book 1
      
Author 1
    
    

      
Book 2
      
Author 2
    
    

      
Book 3
      
Author 3
    
  

  

To achieve the desired functionality, you can use JavaScript/jQuery to handle the user input, search for the value in the table, and highlight the corresponding cells. Here's an example implementation:

HTML

 

   

      

         
Book
         
Author
         
Genre
      
   
   

      

         
The Great Gatsby
         
F. Scott Fitzgerald
         
Classic
      
      

         
To Kill a Mockingbird
         
Harper Lee
         
Classic
      
      

         
The Catcher in the Rye
         
J.D. Salinger
         
Classic
      
       
   

JavaScript/jQuery:

$(document).ready(function() {
    $('#searchBox').on('input', function() {
        var searchTerm = $(this).val().toLowerCase();
        $('#dataTable tbody tr').each(function() {
            var book = $(this).find('td:first').text().toLowerCase();
            if (book.includes(searchTerm)) {
                $(this).addClass('highlight');
            } else {
                $(this).removeClass('highlight');
            }
        });
    });
});

CSS

.highlight { background-color: yellow; }

In the above code, we bind an event handler to the input element with the ID "searchBox" using the on('input') function. Whenever the user enters or modifies the text, the handler is triggered. It retrieves the entered value, converts it to lowercase, and iterates over each row in the table body. For each row, it retrieves the book name from the first column, converts it to lowercase, and checks if it includes the search term. If it does, the 'highlight' class is added to the row, which applies the desired CSS styling. Otherwise, the 'highlight' class is removed.

Note that the code uses jQuery, so make sure you have included the jQuery library in your HTML file. You can include it by adding the following line before the JavaScript code:

You can modify the code to suit your specific table structure and styling requirements.