filter a table based on combibox in js
unction filterTable() {
// Variables
let dropdown, table, rows, cells, country, filter;
dropdown = document.getElementById("countriesDropdown");
table = document.getElementById("myTable");
rows = table.getElementsByTagName("tr");
filter = dropdown.value;
// Loops through rows and hides those with countries that don't match the filter
for (let row of rows) { // `for...of` loops through the NodeList
cells = row.getElementsByTagName("td");
country = cells[1] || null; // gets the 2nd `td` or nothing
// if the filter is set to 'All', or this is the header row, or 2nd `td` text matches filter
if (filter === "All" || !country || (filter === country.textContent)) {
row.style.display = ""; // shows this row
}
else {
row.style.display = "none"; // hides this row
}
}
}
<select id="countriesDropdown" oninput="filterTable()">
<option>All</option>
<option>Sweden</option>
<option>Germany</option>
</select>
<table id="myTable">
<tr><th>Name</th><th>Country</th></tr><!-- header row uses 'th' instead of 'td' -->
<tr><td>Inga</td><td>Sweden</td></tr>
<tr><td>Helena</td><td>Sweden</td></tr>
<tr><td>Hans</td><td>Germany</td></tr>
<tr><td>Anna</td><td>Germany</td></tr>
</table>