I have a table with three columns, normally populated from a SQL database. I'd like to filter the third column based on the value selected from a dropdown menu. I found a W3 Schools tutorial and used it as a blueprint. However I can't get it to work:
<!DOCTYPE html>
<html>
<script>
function filterSector() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("sector");
filter = input.value;
table = document.getElementById("portfolio");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[2];
if (td) {
txtValue = td.value;
if (txtValue.indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<body>
<select id="sector" onkeyup="filterSector()">
<option selected disabled hidden>Sectors</option>
<option value="Industrials">Industrials</option>
<option value="Information Technology">Information Technology</option>
</select>
<table id="portfolio">
<tr>
<td>AAPL</td>
<td>Apple</td>
<td>Information Technology</td>
</tr>
<tr>
<td>MMM</td>
<td>3M</td>
<td>Industrials</td>
</tr>
</body>
</html>The onkeyup event occurs when the user releases a key (on the keyboard).
Use onchange instead.
<select id="sector" onchange="filterSector()">
<option selected disabled hidden>Sectors</option>
<option value="Industrials">Industrials</option>
<option value="Information Technology">Information Technology</option>
</select>
Your filter Sector function has a problem with this line below.
txtValue = td.value;
td.value is undefined. Then you can use td.innerText to solve this.
txtValue = td.innerText;
Final solution. I hope I've helped.
<!DOCTYPE html>
<html>
<script>
function filterSector() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("sector");
filter = input.value;
table = document.getElementById("portfolio");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[2];
if (td) {
txtValue = td.innerText;
if (txtValue.indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<body>
<select id="sector" onchange="filterSector()">
<option selected disabled hidden>Sectors</option>
<option value="Industrials">Industrials</option>
<option value="Information Technology">Information Technology</option>
</select>
<table id="portfolio">
<tr>
<td>AAPL</td>
<td>Apple</td>
<td>Information Technology</td>
</tr>
<tr>
<td>MMM</td>
<td>3M</td>
<td>Industrials</td>
</tr>
</body>
</html>In the script replace txtValue = td.value; with txtValue = td.innerText;
This will extract the td value and then you can compare