如何仅在单击按钮时运行表格过滤器功能？

Question

我有一个基于模型创建的表。 开始书写时，我采用的模型会自动过滤单元格。 我不要那个。 所以我创建了一个按钮，当我们单击按钮时可以过滤结果。 问题是当您想再次搜索表时，我所有的JavaScript代码都不再起作用。

这就是我想要的：仅在单击搜索按钮时才显示表格。 当您想单击输入进行第二次搜索时，该表将不会显示，直到您单击该按钮。

 function myFunction() { var input, filter, table, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } function myFunction2() { document.getElementById("myTable").style.display = "block"; } var input = document.getElementById("myInput"); input.addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { document.getElementById("myBtn").click(); } }); 

 * { 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; outline: none; } #myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; display: none; } #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; } 

 <h2>Test Résultats</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <button onclick="myFunction2()" id="myBtn">Rechercher</button> <table id="myTable"> <tr> <td>Alfreds Futterkiste</td> </tr> <tr> <td>Berglunds snabbkop</td> </tr> <tr> <td>Island Trading</td> </tr> <tr> <td>Koniglich Essen</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> </tr> <tr> <td>North/South</td> </tr> <tr> <td>Paris specialites</td> </tr> </table> 

Answer 1

只需取出keyup处理程序并组合功能即可：

 function myFunction() { var input, filter, table, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } document.getElementById("myTable").style.display = "block"; } 

 * { 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; outline: none; } #myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; display: none; } #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; } 

 <h2>Test Résultats</h2> <input type="text" id="myInput" placeholder="Search for names.." title="Type in a name"> <button onclick="myFunction()" id="myBtn">Rechercher</button> <table id="myTable"> <tr> <td>Alfreds Futterkiste</td> </tr> <tr> <td>Berglunds snabbkop</td> </tr> <tr> <td>Island Trading</td> </tr> <tr> <td>Koniglich Essen</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> </tr> <tr> <td>North/South</td> </tr> <tr> <td>Paris specialites</td> </tr> </table>