How to Search on an HTML Table Using JavaScript
In this Javascript tutorial, we will see how to use JavaScript to filter table data dynamically based on the input text value.
Users can enter their search queries in the input field, and the table will instantly update to display only the rows that match the search criteria.
This feature improves data accessibility and enables users to quickly find the information they need within a large dataset..
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Table Search</title>
<style>
*{
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body{
background-color: #f0f0f0;
margin: 0;
}
#table{
border-collapse: collapse;
margin: 20px auto;
background-color: #fff;
width: 80%;
max-width: 800px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0,0.2);
}
#table th,
#table td{
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}
#table th{ background-color: #f9f9f9; font-weight: bold; }
#table tbody tr:hover{ background-color: #f5f5f5; }
#search-input{
border: none;
border-radius: 5px;
padding: 10px;
width: 80%;
max-width: 600px;
margin: 20px auto;
display: block;
font-size: 16px;
box-shadow: 0px 0px 10px rgba(0, 0, 0,0.2);
}
#search-input::placeholder{ color: #aaa; }
</style>
</head>
<body>
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>Male</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Female</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>35</td>
<td>Male</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
<br>
<input type="text" id="search-input" placeholder="Search...">
<script>
const input = document.getElementById("search-input");
input.addEventListener("input",function(){
// get the value of the input
const searchValue = this.value.toLowerCase();
// get all the rows in the table
const rows = document.querySelectorAll("#table tbody tr");
rows.forEach(row=>{
// get all the cells in the current row
const cells = row.querySelectorAll("td");
// initialize a flag to check if the row contains the search value
let containsValue = false;
// loop through the cells and check if the cell contains the search value
cells.forEach(cell=>{
if(cell.textContent.toLowerCase().includes(searchValue))
{
containsValue = true;
}
});
// if the row contains the search value, show it, otherwise hide it
if(containsValue){ row.style.display = ""; }
else { row.style.display = "none"; }
})
});
</script>
</body>
</html>
Code Explanation:
This JavaScript code performs the following actions:
1 - Attaching an Event Listener: The JavaScript code retrieves the search input element using its id, "search-input", and attaches an event listener to it. The event being listened to is the "input" event, which fires whenever the user modifies the input field.
2 - Implementing the Search Logic: Inside the event listener, the code retrieves the value entered into the search input field and converts it to lowercase. This allows for case-insensitive searching. The code then selects all the rows in the table's tbody using the querySelectorAll() method and assigns them to the "rows" variable.
3 - Iterating Over Each Row and Cell: A forEach loop is used to iterate over each row in the table. For each row, another forEach loop is used to iterate over each cell (td element) within that row.
4 - Checking for a Match: For each cell, the code compares the text content within the cell to the search value. If the search value is found within the cell's content (case-insensitive match), a flag variable "containsValue" is set to true.
5 - Displaying or Hiding Rows: After examining all the cells within a row, the code checks the value of the "containsValue" flag. If it is true, indicating that the row contains the search value, the row is displayed by setting its style.display property to an empty string. Otherwise, if the flag is false, indicating no match, the row is hidden by setting its style.display property to "none".
OUTPUT:
