Tengo una tabla con tres columnas, normalmente poblada de una base de datos SQL. Me gustaría filtrar la tercera columna según el valor seleccionado en un menú desplegable. Encontré un tutorial de W3 Schools y lo usé como modelo. Sin embargo, no puedo hacer que funcione:
<!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>El evento onkeyup ocurre cuando el usuario suelta una tecla (en el teclado).
Utilice onchange en su lugar.
<select id="sector" onchange="filterSector()"> <option selected disabled hidden>Sectors</option> <option value="Industrials">Industrials</option> <option value="Information Technology">Information Technology</option> </select>Su función Sector de filtro tiene un problema con esta línea a continuación.
txtValue = td.value;td.value no está definido. Entonces puedes usar td.innerText para resolver esto.
txtValue = td.innerText;Solución final. Espero haber ayudado.
<!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>En el script, reemplace txtValue = td.value; con txtValue = td.innerText;
Esto extraerá el valor td y luego podrá comparar