So I’ve created a JS function that filters specific rows in the table away, but since It’s only a hide/show filter, the odd/even
rows gets mixed up.
This is how my JS filter works.
var hide_info_checkbox = document.getElementById("hide_info");
var hide_debug_checkbox = document.getElementById("hide_debug");
hide_info_checkbox.addEventListener('change', function() {
var info_td = document.getElementsByClassName("info");
if (this.checked) {
for (var i = 0; i < info_td.length; i++) {
info_td[i].classList.add("ftp_hide_row");
}
} else {
for (var i = 0; i < info_td.length; i++) {
info_td[i].classList.remove("ftp_hide_row");
}
}
});
hide_debug_checkbox.addEventListener('change', function() {
debug_td = document.getElementsByClassName("debug");
if (this.checked) {
for (var i = 0; i < debug_td.length; i++) {
debug_td[i].classList.add("ftp_hide_row");
}
} else {
for (var i = 0; i < debug_td.length; i++) {
debug_td[i].classList.remove("ftp_hide_row");
}
}
});
/*
FTP styling
*/
.ftp_table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
overflow-wrap: break-word;
}
.ftp_table tr:nth-child(even) {
background-color: #d8d8d8;
}
.ftp_hide_row {
display: none;
}
<input type="checkbox" id="hide_info" name="hide_info" value="hide_info">
<label for="hide_info"> Hide INFO</label>
<input type="checkbox" id="hide_debug" name="hide_debug" value="hide_debug">
<label for="hide_debug"> Hide DEBUG</label>
<table class="ftp_table" id="ftp_table">
<tbody>
<tr>
<th>Log</th>
</tr>
<tr class="info">
<td>2021-10-06 12:38:15.946 INFO [conftest:101] -------------- Global Fixture Setup Started --------------</td>
</tr>
<tr class="debug">
<td>2021-10-06 12:38:16.009 DEBUG [Geni:37] Initializing </td>
</tr>
<tr class="info">
<td>2021-10-06 12:38:16.059 INFO [ArtifactoryWrapper:21] Downloading</td>
</tr>
<tr class="info">
<td>2021-10-06 12:38:16.061 INFO [ArtifactHandler:55] Art</td>
</tr>
<tr class="debug">
<td>2021-10-06 12:38:16.063 DEBUG [SessionManager:84] GET</td>
</tr>
<tr class="debug">
<td>2021-10-06 12:38:16.070 DEBUG [connectionpool:227] Starting new HTTP connection (1)</td>
</tr>
<tr class="debug">
<td>2021-10-06 12:38:17.422 DEBUG [connectionpool:452] 200 None</td>
</tr>
<tr class="info">
<td>2021-10-06 12:38:17.561 INFO [SessionManager:52] No application/json Content-Type header in GET response</td>
</tr>
<tr class="debug">
<td>2021-10-06 12:38:17.422 DEBUG [connectionpool:452] 200 None</td>
</tr>
</tbody>
</table>
As you can see, the odd/even
gets mixed up, since I only add a class which hides the rows, and doesn’t delete them:
Is there a way to fix this, so the odd/even is as expected?