Hola, tengo un filtro de búsqueda en mi aplicación. Me gustaría optimizar este código, porque tiene demasiadas líneas de código. ¿Cómo cambiarlo para que funcione igual pero con menos código?
function myFunction() { var input, filter, table, tr, th, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { th = tr[i].getElementsByTagName("th")[0]; // for column one th1 = tr[i].getElementsByTagName("th")[1]; th2 = tr[i].getElementsByTagName("th")[2]; th3 = tr[i].getElementsByTagName("th")[3]; th4 = tr[i].getElementsByTagName("th")[4]; th5 = tr[i].getElementsByTagName("th")[5]; th6 = tr[i].getElementsByTagName("th")[6]; th7 = tr[i].getElementsByTagName("th")[7]; th8 = tr[i].getElementsByTagName("th")[8]; th9 = tr[i].getElementsByTagName("th")[9];// for column two /* columns for search*/ if (th) { if ( (th.innerHTML.toUpperCase().indexOf(filter) > -1) || (th1.innerHTML.toUpperCase().indexOf(filter) > -1) || (th2.innerHTML.toUpperCase().indexOf(filter) > -1) || (th3.innerHTML.toUpperCase().indexOf(filter) > -1) || (th4.innerHTML.toUpperCase().indexOf(filter) > -1) || (th5.innerHTML.toUpperCase().indexOf(filter) > -1) || (th6.innerHTML.toUpperCase().indexOf(filter) > -1) || (th7.innerHTML.toUpperCase().indexOf(filter) > -1) || (th8.innerHTML.toUpperCase().indexOf(filter) > -1) || (th9.innerHTML.toUpperCase().indexOf(filter) > -1) ) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } }Usar hidden y find será mucho más corto
Uso find en lugar de some por razones semánticas.
document.getElementById("myInput").addEventListener("input", function() { const filter = this.value.toUpperCase(); const trs = document.querySelectorAll("#MyTable tbody tr") trs.forEach(tr => { const hide = filter && ![...tr.querySelectorAll("th")] // none of the cells .find(th => th.textContent.toUpperCase().includes(filter));// contains filter tr.hidden = hide; }) })Ejemplo
document.getElementById("myInput").addEventListener("input", function() { const filter = this.value.toUpperCase(); const trs = document.querySelectorAll("#myTable tbody tr") trs.forEach(tr => { const hide = filter && ![...tr.querySelectorAll("td")].find(td => td.textContent.toUpperCase().includes(filter)) tr.hidden = hide; }) }) * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; } #myTable th, #myTable td { text-align: left; padding: 12px; } #myTable tr { border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; } <input type="text" id="myInput" placeholder="Filter" title="Filter text" autocomplete="off" /> <table id="myTable"> <thead> <tr class="header"> <th>Id</th> <th>A</th> <th>B</th> <th>C</th> <th>D</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>One</td> <td>Two</td> <td>Three</td> <td>Four</td> </tr> <tr> <td>2</td> <td>Five</td> <td>Six</td> <td>Seven</td> <td>Eight</td> </tr> <tr> <td>3</td> <td>Nine</td> <td>Ten</td> <td>Eleven</td> <td>Twelve</td> </tr> </tbody> </table>También puede buscar en la tabla de esta manera:
//search input id $("#search").on("keyup", function() { var value = $(this).val().toLowerCase(); //tableStudentbody table id $("#tableStudentbody tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); });