如果在javascript中选中了复选框，则隐藏表行

Question

我有5个复选框的状态行我的表。在我的状态行中，我有状态的编号。我的问题是显示状态1、状态4或状态7等等……，以显示或隐藏表行。

示例如下:https://jsfiddle.net/ChristianCo/dg04m8xy/

function AA_Status_Durchsuchen() {
// Declare variables
var status1, status4, status7, status8, status9, filter, table, tr, td, i, txtValue;
status1 = document.getElementById("statuserstellt").checked;
status4 = document.getElementById("statusgesperrt").checked;
status7 = document.getElementById("statuszurfreigabe").checked;
status8 = document.getElementById("statusrejected").checked;
status9 = document.getElementById("statusfreigegeben").checked;
table = document.getElementById("mainTable");
tr = table.getElementsByTagName("tr");
if (status1 == true) {
status1 = 1;
} else {
status1 = null;
}
if (status4 == true) {
status4 = 4;
} else {
status4 = null;
}
if (status7 == true) {
status7 = 7;
} else {
status7 = null;
}
if (status8 == true) {
status8 = 8;
} else {
status8 = null;
}
if (status9 == true) {
status9 = 9;
} else {
status9 = null;
}
//console.log(status1, status4, status7, status8, status9);
// 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")[4];
if (td) {
// <- - - - - here I need your help!
if (status1.indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}

Answer 1

您可以根据tr和输入元素的dom元素的索引来执行此操作:

document.querySelectorAll('input[type="checkbox"]:checked').forEach(cb => {
// initial values
const index = [...cb.parentElement.children].indexOf(cb);
document.querySelector(`table tr:nth-child(${index + 1})`).style.display = "none";
})
document.querySelectorAll('input[type="checkbox"]').forEach(cb => {
cb.addEventListener('change', e => {
const index = [...e.currentTarget.parentElement.children].indexOf(e.currentTarget);
const checked = e.currentTarget.checked
if (checked) {
document.querySelector(`table tr:nth-child(${index + 1})`).style.display = "none";
} else {
document.querySelector(`table tr:nth-child(${index + 1})`).style.display = "";
}
})
})

<div>
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox">
</div>
<table>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</table>

jsfiddle: https://jsfiddle.net/rttmax/wcony583/36/

Answer 2

它不漂亮，但对我来说很好用。

function AA_Status_Durchsuchen() {
// Declare variables
var status1, status4, status7, status8, status9, filter, table, tr, td, i, txtValue;
status1 = document.getElementById("statuserstellt").checked;
status4 = document.getElementById("statusgesperrt").checked;
status7 = document.getElementById("statuszurfreigabe").checked;
status8 = document.getElementById("statusrejected").checked;
status9 = document.getElementById("statusfreigegeben").checked;
table = document.getElementById("mainTable");
tr = table.getElementsByTagName("tr");
if (status1 == true) {
status1 = "1";
} else {
status1 = null;
}
if (status4 == true) {
status4 = "4";
} else {
status4 = null;
}
if (status7 == true) {
status7 = "7";
} else {
status7 = null;
}
if (status8 == true) {
status8 = "8";
} else {
status8 = null;
}
if (status9 == true) {
status9 = "9";
} else {
status9 = null;
}
//console.log(status1, status4, status7, status8, status9);
filter = (status1 || status4 || status7 || status8 || status9);

// 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")[2];
if (td) {
//
if (filter > -1) {
if (td.textContent == status1) {
tr[i].style.display = "";
} else if (td.textContent == status4) {
tr[i].style.display = "";
} else if (td.textContent == status7) {
tr[i].style.display = "";
} else if (td.textContent == status8) {
tr[i].style.display = "";
} else if (td.textContent == status9) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
};
}

}}