我希望有一个按钮作为表上的过滤器，当单击它时，它会执行一个进行过滤的函数，但当再次单击时，它将取消过滤器。如果第三次点击它，它会再次过滤表格，依此类推。
HTML只是一个简单的按钮选择器：
<button id="filterButton">Click here to filter</button>
我有这个Javascript函数：
window.onload = function() {
document.getElementById('filterButton').onclick = function() {
FilterTable(); //this function is the one that actually does the filtering, basically setting the tr[indexOfRow].style.display="none" on some specific rows.
};
我想这样做，如果再次点击按钮，它会调用一个不同的函数来撤消过滤。
我尝试在这个函数的最后添加一行，使用document.getElementById("filterButton").setAttribute("id", "filterButtonClicked");将按钮的ID更改为filterButtonClicked，然后使用另一个JS函数来处理document.getElementById('filterButtonClicked').onclick事件，这将撤消过滤，然后在这个函数结束时，将按钮的标识更改回fiterButton。理论上，如果第三次点击该按钮，它将触发第一个JS函数，该函数将再次进行过滤并将ID更改为filterButtonClicked。但在实践中，不幸的是，这并没有起作用，它只会将ID更改为filterButtonClicked一次，随后的单击不会将其更改回filterButton。
也许这可以通过这样一种方式来实现，即如果按钮上的点击次数是奇数，它将执行第一个函数，如果是偶数，则执行第二个函数。但我不知道如何实现。
有更好的方法吗？
您正在寻找的答案非常简单。。。
var state = 0; //This will act as the status of the button, 0 means needs unfiltered and 1 means need filtered. It will remain one in starting to show it is unfiltered
window.onload = function() {
document.getElementById('filterButton').onclick = function() {
buttonClickFunction()
};
};
function buttonClickFunction() {
//Run this function whenever the button is clicked
if (state == 0) {
FilterTable(); //this function is the one that actually does the filtering, basically setting the tr[indexOfRow].style.display="none" on some specific rows.
state = 1; //Shows that it has been filtered
} else {
UnfilterTable(); //The function you want to run for unfilter
state = 0; //Change it back to 0 to show its unfiltered
}
}
function UnfilterTable() {
//Whatever u wanna run to unfilter
}
function FilterTable() {
//Whatever u wanna run to filter
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="filterButton">Click here to filter</button>
</body>
</html>声明性地，我会隐藏/显示所需的按钮，并在每个上绑定onclick处理程序
下面是一个例子https://codesandbox.io/s/elegant-glitter-05s6pg
这样的东西应该可以工作：
let filterActive = {
state: false,
};
window.onload = function () {
document.getElementById("filterButton").onclick = function () {
if (filterActive.state === false) {
FilterTable();
filterActive.state = true;
} else {
// Function to undo the filtering here
filterActive.state = false;
}
};
};
您可以使用闭包来跟踪状态。根据表格是否被过滤，你可以显示所有内容或过滤它。
<script>
window.onload = function () {
document.getElementById("filterButton").onclick = function () {
FilterToggle();
};
};
function ShowAllTable() {
// console.log("showing all the table");
}
function FilterTable() {
// console.log("filtering the table");
}
function FilterWithClosure() {
var filtered = false;
return function () {
if (filtered) {
ShowAllTable();
filtered = false;
} else {
FilterTable();
filtered = true;
}
};
}
var FilterToggle = FilterWithClosure();
</script>