【发布时间】：2021-09-21 07:58:37
【问题描述】：
大家好，切换按钮隐藏了表格的某些元素。 每当我在使用前一个切换按钮后尝试使用另一个按钮切换表格时，过滤器将无法正确应用，因为早期切换的元素保持隐藏状态。
我读到 resetfunction 可以重置表格，并且我试图在每个 onclick 切换功能之前重置表格。
如果有人可以单击另一个按钮而无需再次单击相同的切换按钮以显示元素并正确应用另一个按钮的过滤器，那就太好了。
无论我尝试什么，切换按钮都适用于已经切换的表格。按钮应该每次都开始从其原始状态切换列表。 任何帮助将不胜感激。 最好的希望泰拉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<button onclick="toggleDisplay ['Tim','3'];resetValues[''];">Toggle display</button>
<button onclick="toggleDisplay ['Tim','Lea'];resetValues[''];">Toggle display</button>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<tr>
<th>Group</th>
<th>Name</th>
<th>Phone</th>
</tr>
<tr class="Tim">
<td>soccer</td>
<td>name</td>
<td>Phone number</td>
</tr>
<tr class="Lea">
<td>basketball</td>
<td>name</td>
<td>9499494</td>
</tr>
<tr class="3">
<td>basketball/D</td>
<td>Eau</td>
<td>9499545494</td>
</tr>
<tr class="3">
<td>Hockey</td>
<td>Eau</td>
<td>9499545494</td>
</tr>
<tr class="3">
<td>Hockey</td>
<td>Eau</td>
<td>9499545494</td>
</tr>
<tr class="3">
<td>marathon</td>
<td>Eau</td>
<td>9499545494</td>
</tr>
<tr class="3">
<td>sprint</td>
<td>Eau</td>
<td>9499545494</td>
</tr>
<tr class="3">
<td>sprint</td>
<td>Eau</td>
<td>9499545494</td>
</tr>
<tr class="3">
<td>sprint</td>
<td>Eau</td>
<td>9499545494</td>
</tr>
<tr class="3">
<td>cross</td>
<td>Eau</td>
<td>9499545494</td>
</tr>
<tr class="3">
<td>cross</td>
<td>Eau</td>
<td>9499545494</td>
</tr>
<tr class="3">
<td>diskus</td>
<td>Eau</td>
<td>9499545494</td>
</tr>
<tr class="3">
<td>diskus</td>
<td>Eau</td>
<td>9499545494</td>
</tr>
<tr class="3">
<td>chess</td>
<td>Eau</td>
<td>9499545494</td>
</tr>
<tr class="3">
<td>chess</td>
<td>Eau</td>
<td>9499545494</td>
</tr>
</table>
<script>
function toggleDisplay(target) {
let matches = document.querySelectorAll("." + target);
matches.forEach(function (match) {
if (match.style.display == "none")
match.style.display = "block";
else
match.style.display = "none";
});
}
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
function resetValues() {
document.getElementById("myTable").reset();
</script>
</body>
【问题讨论】：
标签： javascript html reset buttonclick