Filtering data in HTML programming usually involves combining HTML, CSS, and JavaScript — because HTML alone is static (it can display data, but can’t filter or manipulate it).
Here’s a simple guide and example on how to filter data displayed on a webpage.
🧩 Example: Filtering a Table with an Input Box
✅ Step 1: Create the HTML structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filter Table Data</title>
<style>
table {
border-collapse: collapse;
width: 50%;
margin-top: 10px;
}
th, td {
border: 1px solid #999;
padding: 8px;
text-align: left;
}
#myInput {
width: 50%;
padding: 8px;
margin-top: 10px;
}
</style>
</head>
<body>
<h2>Filter Table Example</h2>
<input type="text" id="myInput" onkeyup="filterTable()" placeholder="Search for names...">
<table id="myTable">
<tr><th>Name</th><th>Country</th></tr>
<tr><td>John Doe</td><td>USA</td></tr>
<tr><td>Mary Smith</td><td>UK</td></tr>
<tr><td>Linda Johnson</td><td>Canada</td></tr>
<tr><td>Michael Brown</td><td>Australia</td></tr>
</table>
<script>
function filterTable() {
let input = document.getElementById("myInput");
let filter = input.value.toUpperCase();
let table = document.getElementById("myTable");
let tr = table.getElementsByTagName("tr");
for (let i = 1; i < tr.length; i++) { // skip header row
let td = tr[i].getElementsByTagName("td")[0]; // filter by first column (Name)
if (td) {
let textValue = td.textContent || td.innerText;
tr[i].style.display = textValue.toUpperCase().indexOf(filter) > -1 ? "" : "none";
}
}
}
</script>
</body>
</html>
🧠 How it works:
-
The user types in the input box.
-
The
onkeyupevent runs thefilterTable()JavaScript function. -
It compares the user’s input with each table row and hides the rows that don’t match.
⚙️ Variations
You can adapt this approach to filter:
-
Lists (
<ul><li>...</li></ul>) -
Cards or div elements (using
document.querySelectorAll('.card')) -
JSON data fetched from an API (with JavaScript)
Enjoy! Follow us for more...
No comments:
Post a Comment