Question
Hide HTML table until a dropdown selection has been made
Hi! I have an HTML table that loads onto the page from a local CSV file. I also have 2 dropdown selectors that filter the loaded table by "Region" and "Store Owner". I have a script that "hides" the table results if the dropdowns are on their default states of "Select a Region" and "Select an Owner/Manager".
My issue is that when the page loads, it still displays all the table results. Any idea how to hide the tableon page load, and only display the results once the user changes the drop-down options? Here is my rurrent script.
<!DOCTYPE html>
<html>
<head>
<title>CSV Table Filter</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <style>
#badcock_table {
display: none;
}
</style> -->
</head>
<body>
<label for="filter-region">Region:</label>
<select id="filter-region">
<option value="">Select a Region</option>
</select>
<label for="filter-owner">Owner/Manager:</label>
<select id="filter-owner">
<option value="">Select an Owner/Manager</option>
</select>
<div id="badcock_table">
<table id="csv-table">
</table>
</div>
<script>
window.onload = function () {
const table = document.getElementById("csv-table");
const filterRegion = document.getElementById("filter-region");
const filterOwner = document.getElementById("filter-owner");
const valuesRegion = {};
const valuesStatus = new Set();
fetch("data/data.csv")
.then(response => response.text())
.then(data => {
const rows = data.split("\n");
for (let i = 0; i < rows.length; i++) {
const cells = rows[i].split(",");
if (cells.length > 1) {
const row = table.insertRow(-1);
if (i === 0) {
for (let j = 0; j < cells.length; j++) {
const headerCell = document.createElement("th");
headerCell.appendChild(document.createTextNode(cells[j]));
row.appendChild(headerCell);
}
} else {
for (let j = 0; j < cells.length; j++) {
const cell = row.insertCell(j);
cell.appendChild(document.createTextNode(cells[j]));
}
valuesRegion[cells[0]] = true;
valuesStatus.add(cells[2]);
}
}
}
for (const region in valuesRegion) {
const option = document.createElement("option");
option.value = region;
option.text = region;
filterRegion.appendChild(option);
}
const sortedOptions = Array.from(valuesStatus).sort();
for (let i = 0; i < sortedOptions.length; i++) {
const option = document.createElement("option");
option.value = sortedOptions[i];
option.text = sortedOptions[i];
filterOwner.appendChild(option);
}
const filterTable = function () {
const selectedRegion = filterRegion.value;
const selectedStatus = filterOwner.value;
for (let i = 0; i < table.rows.length; i++) {
if (i === 0) {
table.rows[i].style.display = "";
} else {
const cells = table.rows[i].cells;
const region = cells[0].textContent;
const status = cells[2].textContent;
if ((selectedRegion === "" || selectedRegion === region) && (selectedStatus === "" || selectedStatus === status)) {
table.rows[i].style.display = "";
} else {
table.rows[i].style.display = "none";
}
}
}
// Hide the table if both drop-down lists are on their default values
if (selectedRegion === "" && selectedStatus === "") {
table.style.display = "none";
} else {
table.style.display = "";
}
};
filterRegion.addEventListener("change", filterTable);
filterOwner.addEventListener("change", filterTable);
})
.catch(error => console.error(error));
};
</script>
</body>
</html>
AdChoices