My table allows users to filter out specific rows by selecting a checkbox. When a checkbox is checked, certain rows are hidden. I am trying to create an array with all the rows that are not hidden, but I am having trouble accessing the visibility state of the <td>.
https://i.sstatic.net/ifjwt.png
The table's id is ftp_table and the rows I need data from have the class name download. I attempted to retrieve the visibility value by using the following code snippet after a hide row function runs, but I have not been successful:
function download_log() {
var rows = document.getElementsByClassName("download");
var log = [];
for (var i = 0; i < rows.length; i++) {
// Check if item is hidden or not (create an if statement and push into array)
console.log(getComputedStyle(rows[i]).visibility);
// append new value to the array IF NOT HIDDEN
log.push(rows.item(i).innerHTML);
}
}
After hiding something, the output I receive shows everything is visible:
https://i.sstatic.net/21yqW.png
Here is an example of the table where all info rows have been hidden:
<table class="ftp_table" id="ftp_table">
<tbody>
<tr class="grey">
<th>Log</th>
</tr>
<tr class="info" hidden>
<td class="download">2021-10-06 12:38:15.946 INFO [conftest:101] -------------- Global Fixture Setup Started --------------</td>
</tr>
<tr class="debug">
<td class="download">2021-10-06 12:38:16.009 DEBUG [Geni:37] Initializing</td>
</tr>
<tr class="info" hidden>
<td class="download">2021-10-06 12:38:16.059 INFO [Wrapper:21] Downloading</td>
</tr>
<tr class="info grey" hidden>
<td class="download">2021-10-06 12:38:16.061 INFO [Handler:55] AV+</td>
</tr>
<tr class="debug grey">
<td class="download">2021-10-06 12:38:16.063 DEBUG [Session:84] GET'</td>
</tr>
</tbody>
</table>