Search a row in a table

Question

Hi

I am displaying data in a table. I have text box . I want whatever is entered in a Textbox it should find that value in Book column of that table. If found in any row then Book Column should be highlighted

Thanks

Deepak Rawat · Answer

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.

Ramco Ramco · Answer

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

Amit Mohanty · Answer

.highlight { background-color: yellow; } Book Author Book 1 Author 1 Book 2 Author 2 Book 3 Author 3 function highlightTable() { var input = document.getElementById('searchBox').value; var table = document.getElementById('dataTable'); var rows = table.getElementsByTagName('tr'); for (var i = 0; i = 0) { found = true; break; } } if (found) { rows[i].classList.add('highlight'); } else { rows[i].classList.remove('highlight'); } } }

Search a row in a table

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (3)