Create array of non hidden td rows

December 29, 2021

So I have a table where the users can filter out specific rows, by checking a checkbox. If a checkbox is selected then, some rows will get the hidden state.

I want to create a array with all the rows that isn’t hidden, but I can’t seem to get the state of the <td>.

The tables id is ftp_table and the rows I need the data from has the class name download. I tried to so something like this, to get the visibility value, but without any luck. The function is triggered after a hide row function has run.

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 a if 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);
    }
}

The output I get when i hide something is everything is visible?:

Here is a example of the table, where all info rows has 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>

>Solution :

You could use the following selector :

document.querySelectorAll("#ftp_table tr:not([hidden]) td.download");

It will select the td.download elements in tr that are not hidden in your table.

var visibleTds = document.querySelectorAll("#ftp_table tr:not([hidden]) td.download");

var arr = [];

for(let i = 0; i < visibleTds.length; i++){
  arr.push(visibleTds[i].innerText);
}

console.log(arr);

<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>