HTML
CSS
JS
Edit on Codewith.it
<label for="ricerca">Cerca:</label> <input type="text" id="ricerca" onkeyup="cerca()" name="ricerca" placeholder="Cerca..."><br/><br/> <table id="tabella"> <tr> <th>Nome pietanza</th> <th>Tipologia</th> <th>Prezzo</th> </tr> <tr> <td>Spaghetti alla carbonara</td> <td>Primo piatto</td> <td>€6,50</td> </tr> <tr> <td>Petto di pollo</td> <td>Secondo</td> <td>€5,00</td> </tr> <tr> <td>Patate al forno</td> <td>Contorno</td> <td>€3,00</td> </tr> <tr> <td>Tiramisù</td> <td>Dolce</td> <td>€3,50</td> </tr> <tr> <td>Birra alla spina</td> <td>Bevanda</td> <td>€3,50</td> </tr> </table>
table { border-collapse: collapse; } td, th { padding:6px; } table th { background-color:#888888; } table tr { background-color:#D8D8D8; } table tr:nth-child(even) { background-color:#ACACAC; }
function cerca() { var input, filter, table, tr, td, i, txtValue; input = document.getElementById("ricerca"); filter = input.value.toUpperCase(); table = document.getElementById("tabella"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { txtValue = td.textContent || td.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } }