Search in a Table
The following code snippet demonstrates how to implement a search functionality in a table using JavaScript. The example assumes you have a table with an ID of tbl-shows and an input field with an ID of searchInput.
function searchTable() { // Get the input value const filter = document.getElementById('searchInput').value.toLowerCase();
// Get the table and rows // NOTE: The table's <tbody> ID is 'tbl-shows' and the input ID is 'searchInput' const table = document.getElementById('tbl-shows'); const rows = table.getElementsByTagName('tr');
// Loop through all rows (starting from index 1 to skip header) for (let i = 0; i < rows.length; i++) { const cells = rows[i].getElementsByTagName('td');
// Loop through all cells in the row and check if any cell contains the filter text. // The current implementation only checks the first column (index 0). However, you can modify it to check other columns as well. if (cells[0].textContent.toLowerCase().includes(filter)) { rows[i].style.display = ''; } else { rows[i].style.display = 'none'; } }}javascript